How to set max-height of text equal to line number

Asked Jul 07 '15 at 12:15

Active Jul 07 '15 at 12:15

Viewed 307 times

I have text, which is changed dynamically and I want to prevent it to be more than 3 lines for example (taking into account font-size and line-height properties).

Is it possible to achieve that in css only?

The use case is that I am using an external library, which sets the line-height of font, so I cannot calculate it dynamically in css.

Also I have tried 3em, 6ex, 4.5ch, after this answer, and it did not work for me, because it does not take into account the line-height property.

Example http://joxi.ru/48AnKxpiNXJgrO

edited May 23 '17 at 12:29

Community

asked Jul 07 '15 at 12:15

Oleksandr Tserkovnyi

Yes you can do that with css using multiple line ellipsis. Take a look at [this](http://codepen.io/anon/pen/gpeeEP) example. – aleksandar Jul 07 '15 at 12:29
Thanks! It looks very persuasively, but it seems to be non [cross-browser](https://css-tricks.com/line-clampin/), is there any other possibilities? – Oleksandr Tserkovnyi Jul 07 '15 at 12:42
I think its pretty cross-browser. I checked it on firefox, chrome and internet explorer. – aleksandar Jul 07 '15 at 13:18
@wazaaaap Doesn't this only work because you set the line height yourself? I thought the OP couldn't do that. – Mr Lister Jul 07 '15 at 13:42
@mr-lister exactly, only because of height it works in FF :( There should be some values, as `ex` or `ch`, which can be used. – Oleksandr Tserkovnyi Jul 07 '15 at 14:42

How to set max-height of text equal to line number

0 Answers0