Read more button only if text is breaking

Question

I would like to create a "read more" button that only will show if the text inside a wrapper is breaking.

This is my code so far:

HTML

<div class="comment-wrapper">
    <div class="text">
        Lorem ipsum. Lorem ipsum Lorem ipsum. Lorem ipsum Lorem ipsum. ipsum. Lorem ipsum
        Lorem ipsum. Lorem ipsum Lorem ipsum. Lorem ipsum Lorem ipsum. Lorem ipsum
        Lorem ipsum. Lorem ipsum.
    </div>
    <div class="read-more">Read more</div>
    <div class="read-less">Read less</div>
</div>

CSS

.read-more{
    font-size: 12px;
    margin-top: 12px;
    cursor: pointer;
    display: block;
    text-align: left;
}
.read-less{
    font-size: 12px;
    margin-top: 12px;
    cursor: pointer;
    display: none;
    text-align: left;
}

.comment-wrapper.open .read-more {
    display: none;
}
.comment-wrapper.open .read-less {
    display: block;
}

.comment-wrapper .text {
    text-align: left;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.comment-wrapper.open .text {
    display: block;
}

JS

jQuery(".read-more").on("click",function(){
    jQuery($(this)).parent('div').addClass('open');
});

jQuery(".read-less").on("click",function(){
    jQuery($(this)).parent('div').removeClass('open');
});

How can I achieve this within this code?

Does this answer your question? https://stackoverflow.com/questions/143815/determine-if-an-html-elements-content-overflows — isherwood, Apr 15 '21 at 15:50

score 1 · Answer 1 · edited Feb 11 '23 at 13:58

window.addEventListener('load', function() {
  $('.comment-wrapper').each(function() {
    var scrollHeight = this.getElementsByClassName('text')[0].scrollHeight;
    var clientHeight = this.getElementsByClassName('text')[0].clientHeight;
    var thisElem = this;
    if ( scrollHeight > clientHeight ) {
      $(this).children('.read-more').show();
    } else {
      $(thisElem).find('.read-more, .read-less').hide();
    }
    $(this).children(".read-more").on("click", function() {
      console.log('done');
      $(thisElem).find('.read-more, .read-less').toggle();
    });

    $(this).children(".read-less").on("click", function() {
      $(thisElem).find('.read-more, .read-less').toggle();
    });
  });
});

Thanks! this is a working solution for me!! Have a nice day! — pos-sudo, Apr 16 '21 at 07:26

score 0 · Answer 2 · edited Apr 15 '21 at 15:45

0

window.addEventListener('load', function() {
     var scrollHeight = document.getElementsByClassName('text')[0].scrollHeight;
     var clientHeight = document.getElementsByClassName('text')[0].clientHeight;

     if( scrollHeight > clientHeight ) {
        $('.read-more').show();
     } else {
        $('.read-more, .read-less').hide();
     }
     $(".read-more").on("click",function(){
        $('.read-more, .read-less').toggle();
    });

    $(".read-less").on("click",function(){
        $('.read-more, .read-less').toggle();
    });
});

edited Apr 15 '21 at 15:45

isherwood

58,414
16
114
157

answered Apr 15 '21 at 15:07

garex aka

11
2

First of all thanks for the answer!! I implemented it in the code, but unfortunately now I can't see any buttons? – pos-sudo Apr 15 '21 at 15:14
You should set .read-less display: none; When window loaded and text is small buttons hidden, when text big buttons show – garex aka Apr 15 '21 at 15:19
If text big and buttons show, after click buttons read-less and read-more will change – garex aka Apr 15 '21 at 15:21
your code with addClass and removeClass is not required – garex aka Apr 15 '21 at 15:22
Sorry, You should set .read-more display: none; It will show if text will be big – garex aka Apr 15 '21 at 15:24
ah, I understand thank you very much! Last question in order to solve this issue: is there something to select each 'text' classes because I've multiple of them. Thanks in advanced! – pos-sudo Apr 15 '21 at 15:26
You can use id for each class, also use $('.class').eq(1) with number in list in dom or use "each" for all .text divs – garex aka Apr 15 '21 at 15:36
This answer would be better with some explanation or inline documentation. – isherwood Apr 15 '21 at 15:45
I add in css: .text { width: 200px; height: 200px; overflow: auto; } and .read-more{ display: none; } – garex aka Apr 15 '21 at 15:55
js i can`t add to comment, so i added as answer – garex aka Apr 15 '21 at 15:57

Read more button only if text is breaking

2 Answers2