Check how many lines the <p> tag will occupy.

Question

I wandered, is there a way to check how many lines in the text in the tag <p>are occupied after beg is wrapped? I know the width and height <div>that this one contains <p>.

This question arose when I tried to cut out the text if it was longer than 3 lines and make it expandable later. I know that I can achieve this by cutting off the text with a fixed length (average number of characters per line). But I just wandered :)

Answer 1

you really don't need to know how many pixels are longer if you use relative units for font size, height and line height: see this script - http://jsfiddle.net/6WRsg/

I installed line-height: 1.3and height: 3.9em /* (1.3 * 3 lines) */; therefore, regardless of font size, you always show no more than three lines of text.

When you need to show all content, just switch programmatically (via javascript) to height auto

Answer 2

You can put the pair temporarily outside the visible page with the position: absolute, left: -2000px, and then check your offsetHeight to get an idea of ​​how many lines it will have. Not sure how you find exact line breaks.