Max. number of text lines; Is this method reliable?

Question

I need to limit some text, so that it never exceeds 2 lines

This is what I have so far:

<h3>Here is some long text, it just keeps on going and going and going.. Hello, how are you? I'm fine thank you. And yadda yadda yadda</h3>

h3 {
    width: 400px;
    font-size: 1.5em;
    max-height: 2.4em;
    line-height: 1.2em;
    overflow-y: hidden;
    /* perhaps throw in some padding and margin control to be sure */
}

See fiddle: http://jsfiddle.net/e5EKY/

It seems to work, and I have tested it in a handful of browsers with good result

But can I count on this? Are there scenarios where it would exceed 2 lines?

If user zooms in or enlarges font-size in browser, the max-height and line-height should follow (em's), so I don't see that as a problem

(PS: I need to use em's, so pixel-sized is not an option)

Answer 1

Your method will work, sure, but there is only one thing: if you write down a word that exceeds the 400px width then it will overflow horizontally. To fix this, you just need to add word-wrap: break-word and white-space: pre to the CSS rules.

Answer 2

If your question is about "user agent CSS stylesheet" and override it, then use the !important rule behind your em units rules and set the box-sizing that suits your code :

h3 {
    width: 400px;
    font-size: 1.5em !important;
    max-height: 2.4em !important;
    line-height: 1.2em !important;
    overflow-y: hidden;/* see @Marco Bonnelli answer to improve this part */
    /* perhaps throw in some padding and margin control to be sure 
     - box-sizing ? */
    box-sizing:content-box !important;/* so no matter if there is borders or padding */
}

!important should be used when you do have no other option, else it can drive you nuts :).