Simply making sure some text that might be long doesn’t break our layout is trivial, but I’ve seen several CSS newbies have trouble with this or simply miss it altogether just to have QA (or worse, a user) file a bug about it.

The naive approach is usually just adding a width to the element and assume the problem is solved. But that is not so, my friends:

1
2
3

<div style="width: 10em;">
    Some longer than expected text
</div>

As we can see, the text is causing the element’s height to increase. Assuming that’s going to work with our layout, you might assume we’re all ready to go. But are we, really?

1
2
3

<div style="width: 10em;">
    Some longer than expected text with antidisestablishmentarianism
</div>

Ah, it’s leaking there. We can of course add overflow-x: hidden but what if we want all the content to be displayed? That’s, my friends, a job for word-wrap: break-word:

1
2
3

<div style="width: 10em; word-wrap: break-word;">
    Some longer than expected text with antidisestablishmentarianism
</div>

OK, that seems to work (note: you can make the text hyphenated on some browsers). Now, stepping back a bit, what if we can’t have it take multiple lines? We can limit that too by adding a height to the element:

1
2
3

<div style="width: 10em; height: 1.2em;">
    Some longer than expected text
</div>

Bummer. Oh, I know! Let’s add overflow-y: hidden:

OK, this seems to do the trick. Or does it?

1
2
3

<div style="width: 10em; height: 1.2em; overflow-y: hidden;">
    Now a long woooooooooooooooooooooooooooooooord
</div>

Humph. A horizontal scroller even though the displayed contents aren’t that long. Guess we’ll have to go with overflow: hidden altogether then:

1
2
3

<div style="width: 10em; height: 1.2em; overflow: hidden;">
    Now a long woooooooooooooooooooooooooooooooord
</div>

OK, I think I’ll stop pulling your leg. I’ll just add that I like adding an ellipsis for making it clear that some text was trimmed with text-overflow: ellipsis. Problem is that text-overflow only works on single-line content, so we have to make sure our element’s text doesn’t wrap by also adding white-space: nowrap:

1
2
3

<div style="width: 10em; height: 1.2em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
Now a long woooooooooooooooooooooooooooooooord
</div>

Overflow away :)