Question

I have text with a background image of a fixed width and height. I want the text to be a fixed number of lines (3). The text wraps differently in different browsers, sometimes inserting an extra line which makes the text go over the boundary of the background image. This means I have to add/remove words from my text and continually check the rendering in each browser to see that it is the same number of lines.

I am guessing that either the browsers are rounding the width/margin/padding so that the width of the container is different, or that the text is rendered slightly differently in each browser (with more or less width).

What would be the recommended practice for this? I want the text in the container to be no more than 3 lines long, so I am just as well to fix the height of the container.

Answer 1

The recommended practice is not do something like this. Try to redesign so that the background image isn’t/doesn’t need to be of fixed height and the text doesn’t need to be limited to exactly three lines. If this is some kind of requirement imposed on you by your boss/customer, you’ll need to talk with them and explain, that this isn’t something one can or should do in HTML/CSS.

Keep in mind, that not only the width of the characters will be different in each browser resulting in different wrapping, but browsers will display the text lines in different heights, too, so it can be that your element can’t contain three lines.

If you have no other choice, consider using overflow: hidden on the fixed-size element, however this will most likely lead to cut off letters and/or words.

---

EDIT re comment:

I don’t think the available space would variate between browsers. If you were using relative units (em, %), then maybe there would be rounding differences of one pixel max. However you are using pixels, which should be identical in all current browsers (in Standards Mode).

Anyway I’m not saying you should restrict the amount of text you want to display, just give the text some space to “breath” and don’t give the element a fixed height in pixels. Instead:

• Set a line-height (for example 1.25) and a min-height three times the amount (here 3.75em).
• Use your best estimate to limit the text you want to put in there to three lines.
• Add some JavaScript that shortens the text, in case it does happen to go over three lines.
• Adjust your layout (including a flexible background for that element), so it can survive both a few pixels difference due to different browser’s (and more importantly the user’s preferred) font size and can survive an additional line of text just in the seldom case that you mis-estimated the text length and JavaScript isn’t available.