Question

I was wandering, is there a way to check how many lines will a text in a <p> tag occupy after beeng wrapped? I know the width & height of <div> that contains this <p>.

This question came up when I was trying to cut a text if it’s more then 3 lines long, and make it expandable later. I know I can achieve this by cutting the text with fixed length (average symbol count in a line). But I was just wandering 🙂

Answer 1

you don’t actually need to know how many pixels the text is long if you use relative units for font-size, line-height and height: see this fiddle – http://jsfiddle.net/6WRsg/

I set a line-height: 1.3 and height: 3.9em /* (1.3 * 3 lines) */; so no matter what the font-size is, you always display at most three lines of text.

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