-1

<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.

enter image description here

Manisha Chaudhary
  • 1
  • 4
  • 3
    and what have you tried so far? I'm sure you don't want us to code all of it for you. Please re-read: https://stackoverflow.com/help/how-to-ask and also https://stackoverflow.com/help/mcve especially **…Minimal – Use as little code as possible that still produces the same problem** – caramba Aug 11 '17 at 10:26
  • Possible duplicate of [CSS text-overflow: ellipsis; not working?](https://stackoverflow.com/questions/17779293/css-text-overflow-ellipsis-not-working) – Justinas Aug 11 '17 at 10:32
  • can u show your efforts? – Ajay Pandya Aug 11 '17 at 10:33
  • Hii!! I have tried and it shows me the 'show more' even if the content is wrapped up in one line. And I want it to 'show more' link only when the text expands up to more than one line. – Manisha Chaudhary Aug 12 '17 at 16:31
  • I wanted it to be responsive and with the use of css only. – Manisha Chaudhary Aug 12 '17 at 16:54

1 Answers1

2

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>
thexpand
  • 641
  • 13
  • 28