A button to show more of the content when it spreads on more than one line

Question

<div class="questionnaire-description col-xs-12" id="questionnaire_description_wrapper"> <text-truncate> <span ng-class="questionnaire_description.show_more ? 'full-description' : 'ph-ellipsis'" id="questionnaire_description"> <span class="ph-caption" ng-bind="questionnaire_details.description"></span> </span> </text-truncate> <span class="text-center questionnaire-sub-details" ng-if="!questionnaire_description.show_more"> <span class="ph-caption cursor-pointer" ng-bind="'SEARCH_SHOW_MORE'|translate" ng-click="questionnaire_description.show_more=true" ng-if="!questionnaire_description.show_more"></span> </span> </div> I want to have show more button with ellipsis only when text is long to fit it in more than one line. If there is only one line, I don't want anything. If the text is long, I want ellipsis and show more at the end of the first line.

Answer 1

You can use a little bit of JavaScript and text-overflow CSS property to make this work.

Using white-space: nowrap makes the text spawn on one row, without the text going on multiple lines.

The fixed with of 200px and overflow: hidden "cuts" the text so that not all of it could be visible.

Then, when text-overflow: ellipsis is applied, three dots are placed at the end of the text, before it overflows.

The "Show more"/"Show less" buttons just toggles between the two states of the text.

 var $text = jQuery(".text"); var $button = jQuery(".show-more"); $button.on("click", function(){ $text.toggleClass("is-expanded"); if($text.hasClass("is-expanded")){ $button.text("Show less"); } else { $button.text("Show more"); } }); 

 .text { width: 200px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .text.is-expanded { white-space: initial; overflow: visible; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="text"> This is very very long text and it is hidden at the end. This is very very long text and it is hidden at the end. This is very very long text and it is hidden at the end. This is very very long text and it is hidden at the end. </div> <button class="show-more">Show more</button>