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?

Answer 1

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/ .

Answer 2

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.

http://webdev-il.blogspot.com/2011/03/how-to-convert-pixel-to-em-why-use-ems_31.html