5 Answers
5

For a basic approach, you could take a look at the line-height CSS property and use that in your calculations. Bear in mind that this approach will not account for other inline elements that are larger than that height (e.g. images).

If you want something a bit more advanced, you can get the information about each line using getClientRects() function. This function returns a collection of TextRectangle objects with width, height and offset for each one.

See this answer here for an example (albeit an unrelated goal) of how getClientRects() works.

Update, had a bit of time to come back and update this answer with an actual example. It's basic, but you get the idea:

The collection returned by getClientRects is static, it won't update automatically if the containing element's dimensions change. My example works around this by capturing the window's resize event.

For some strange standards-compliance reason that I'm not understanding, the element you call getClientRects on must be an inline element. In the example I have, I use a container div with the text in another div inside with display: inline.

Looks like something which could be used, thanks. Though, I am unfortunately not smart enough to put the whole script together, including the more/less link. Anybody know how to do this?
–
Bento GraphicJun 28 '10 at 10:37

@Bento: the real problem is that javascript requires that the content be rendered first, then modified. So you have a tradeoff, either render the content in full and shrink it down when it's ready, or render it hidden and then show the amount you need when the document is ready. It's a very clunky design and you might be better off marking this question as answered and asking another question for some better advice.
–
Andy EJun 28 '10 at 10:51

I am not sure how all the Jquery scripts for text truncation dealing with it i.e. before/after. At the moment I am using the following script and the effect is not visible (in case its rendering the HTML first and then truncates): http://plugins.learningjquery.com/expander/ It cant be too hard of a task, since there are plenty of Jquery plugins out there, but none provides truncation by line (only by character): plugins.jquery.com/search/node/… Which questions are you suggesting? Not sure how phrase this in different words. Thanks for your reply.
–
Bento GraphicJun 29 '10 at 10:49

why not make the p element with overflow: hidden; give fixed line height, caluclate the height of the div so id contains exactly the number of lines you require and the only change the height of the p from javascript.

Thanks for the tip. Though, it seems not flexible enough since all paragraphs on the page have a different length (it`s actually a list of news items). If I expand it to i.e. 52px it might not be enough space for some and too much space for others. It needs to be dynamic somehow.
–
Bento GraphicJun 28 '10 at 10:43

it was a example and I think you can calculate the new height dinamycally but Andy's answer looks better than my idea.
–
jikhanJun 28 '10 at 15:41

If you used a monospaced font, you'd have a shot at this working, as you'd have a good idea how many letters fit onto each line, for an element of a defined width. However, if a word breaks across lines, then this might get tricky..

e: found another question which is basically what you're after - they didn't really have a resolution either, but to my mind, the line-height and element height seems closest.

Was about to make @Andy E's awesome example into a plugin, but then realized https://github.com/BeSite/jQuery.dotdotdot could pull this off. Our use case is we want to show one line on desktop widths and two lines on mobile/tablet.

Our CSS will just set the container div to the equivalent of one or two line-height's accordingly and then the dotdotdot plugin appears to handle the rest.