Need clean truncation of text for showing more-less

Question

Using this javascript to show more-less, is there a simple way to make the text cut off clean so that it displayes whole lines of text (doesn't slice them horizontally)?

 <div id="description" style="height: 20px; overflow: hidden"> Lots of text. </div> <a href="#" id="more-less">Show more/less>></a> <script> var open = false; $('#more-less').click(function() { if (open) { $('#description').animate({height:'20px'}); } else { $('#description').animate({height:'100%'}); } open = !open; });

If it makes it easier I can truncate on <br /> tags.

PleaseStand · Accepted Answer · 2010-12-30 21:27:48Z

2

Change 20px to a value in ems, such as 2em. One em is (approximately?) equal to the height of one line. You should also set the margin and padding on the p tag in ems.

answered Dec 30, 2010 at 21:27

PleaseStand

32.2k7 gold badges72 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Will Curran Over a year ago

I am using em for all my font styling! This should work cross browser.

Collectives™ on Stack Overflow

Need clean truncation of text for showing more-less

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related