jQuery & CSS - Cut text by height, no truncate

Question

Because I want to toggle my text I need to hide a part of it.

Problem

My text height is going to be X or less pixels in height.
The height of the div depends on a sidebar height and is not as static as this demo.
If the letters on the last row are now truncated (se demo), I want to hide that row as well.

Look at my demo: http://jsfiddle.net/qWDLb/1/

My own thougt would be if the height could be calculated by using line-height or font sizes?

Links to external sites can be a useful *adjunct* to a question, but always post the relevant code/markup *in the question itself*. More: http://meta.stackexchange.com/questions/118392/add-stack-overfow-faq-entry-or-similar-for-putting-code-in-the-question — T.J. Crowder, Jan 10 '12 at 17:48
Best bet is to simply set the div's height in ems. Specifically, in multiples of `line-height`. — Chris Pratt, Jan 10 '12 at 17:49

score 0 · Answer 1 · answered Jan 10 '12 at 17:59

0

You will want to deal with EMs. Figure out the div's height, and if necessary, you can shrink the height of the DIV to hide the partial line.

answered Jan 10 '12 at 17:59

KOGI

score 0 · Accepted Answer · answered Jan 10 '12 at 18:01

0

You can determine line-height with:

$('.text').css('line-height')

This give you this height with 'px' at the end. Here is a working jsfiddle for showing 4 lines : http://jsfiddle.net/scaillerie/qWDLb/3/ .

answered Jan 10 '12 at 18:01

Samuel Caillerie

2 Answers2