Geek Answers Handbook

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

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 the script: http://jsfiddle.net/e5EKY/

This seems to work, and I tested it in several browsers with a good result.

But can I count on this? Are there any scenarios in which it will exceed 2 lines?

If the user has increased or increased the font size in the browser, the maximum height and line height should match (em), so I don't see a problem in this

(PS: I need to use em, so pixel size is not an option)

+4
source share
2

, , : , 400 , . , word-wrap: break-word white-space: pre CSS.

+8

" CSS " , em em units , :

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 , , :).

+2

More articles:


All Articles