codelord.net

Code, Angular, iOS and more by Aviv Ben-Yosef

CSS Tip: Overflowing with Text

| Comments

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:

Some longer than expected text

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?

Some longer than expected text with antidisestablishmentarianism

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:

Some longer than expected text with antidisestablishmentarianism

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:

Some longer than expected text

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:

Some longer than expected text

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

Now a long woooooooooooooooooooooooooooooooord

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:

Now a long woooooooooooooooooooooooooooooooord

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:

Now a long woooooooooooooooooooooooooooooooord

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

Write maintainable Angular, learn the best practices and get prepared for 2.0!

Comments