0

I have a video page with video description. Now I want to show description with 2 lines by default and below the description will be a 'Read More' button.

But if the description is less than or equal to 2 lines, I don't want to show the 'Read More' button. 'Read More' button will be shown only when description will be more than 2 lines.

I need this to be done completely with JS or jQuery.

Here is what I have tried so far with no luck.

<div class="video-description" style="line-height:1.2em;max-height:4.8em;">              
<p>
 Description Line 1
 Description Line 2
 Description Line 3
</p>        
</div>
<div class="read-more-button">Read More</div>

if ($('.video-description').css('height') <= '67px' {
   $('.read-more-button').hide();
} else {
   $('.read-more-button').show();
}
Kiran
  • 21
  • 1
  • 5
  • 1
    Please add your html etc. You should not be depending on pixel size etc. – Akrion Aug 21 '18 at 21:09
  • And if you do want to use pixel size, use the .height() method as it gives a number without units as a return, which you can then use a greater-than-or-equal operator on. – Iskandar Reza Aug 21 '18 at 21:11
  • Possible duplicate of [How can I count text lines inside an DOM element? Can I?](https://stackoverflow.com/questions/783899/how-can-i-count-text-lines-inside-an-dom-element-can-i) – Alex Aug 21 '18 at 21:11
  • the problem is more complicated as line-height returns "normal" when not set to pixel value – Flash Thunder Aug 21 '18 at 21:12
  • 3
    Possible duplicate of [How to create a "show more" button and specify how many lines of text can be initially shown](https://stackoverflow.com/questions/12307666/how-to-create-a-show-more-button-and-specify-how-many-lines-of-text-can-be-ini) – Martin Geldart Aug 21 '18 at 21:23
  • Added the html. – Kiran Aug 21 '18 at 21:29
  • @Akrion But you can't quickly get pixels in em. The only way would be to create fake divs to check that out. – Flash Thunder Aug 21 '18 at 21:29

1 Answers1

2

Generally there is no simple way to detect how many lines of text are in div... the only reliable way would be to create invisible (with visibility:hidden) divs with 1 and 2 lines and that way to get height of line in div of given class. The problem with em is that there is no other way to get the height of the element in em as well.

As you are new, I will simply address your problem and why your example does not work... First of all, the way of getting element height is wrong... if there would be no height style set, it would return nothing, if style would be set, it would return value with units as a string and then You can't compare it as numbers. Second thing is that you are missing ending bracket ()) in your if condition, so you basically got syntax error.

You should use height() instead and a number in pixels to compare, for example:

if($('.video-description').height() <= 67){
   $('.read-more-button').hide();
} else {
   $('.read-more-button').show();
}
Flash Thunder
  • 11,672
  • 8
  • 47
  • 91