Truncating text to (x) no. of lines

JavaScript
1

Hi all

I’m just wondering if anyone has any ideas on something that’s been puzzling me for a short while. I have a box on a website which is populated by a feed, which changes regularly. Because of limited space, I’ve truncated feed items to only show the first e.g. 150 characters, so only introductory text gets displayed.

The problem is that the size of 150 characters can vary greatly depending on what letters are being used - sometimes the content can fill all two lines (which is great), and sometimes it only fills one and a bit (which looks odd).

Does anyone know of a way, using JS, that I can truncate text to just being two lines, regardless of the number of characters?

Sorry - I don’t have a public URL to show as an example. Hope that makes sense, and thanks for your help!

Nick

2

You can use CSS to set the vertical overflow to hidden, so that any excess is automatically dealt with.

3

Set the height of the element to a multiple of the line-height, so a line of text is not cut in half.

Eg.:
.truncateClass{position: relative; line-hight:1.25em; height: 2.5em; width: 25%; overflow: hidden;}

4

Thanks guys, that’s really helpful. I think that truncating this by CSS is indeed the best way. I’d ultimately have liked to have done more fiddly stuff like adding a ‘…’ to the end of the last line (meaning I’d probably have to find a JS solution), but that’s not such a big deal, so will probably go with this.

Cheers again!

5

Here is CSS String Truncation with Ellipsis which should be able to be made to work as a multi-line situation without too much difficulty.

6

Wow - that’s fantastic, thanks Paul, will give it a try!