Text Effects and Typographic Styles 69
Restricting Overflow
Under certain circumstances—perhaps on mobile devices where screen
space is limited—you may want to restrict text to a single line and a fixed
width, perhaps when displaying a list of links to other pages, where you
don’t want the link text to wrap onto multiple lines. In these circumstances,
your text being wider than its container and getting clipped mid-character
can be quite frustrating.
A new property called text-overflow is available in CSS3 for just those
circumstances. Here’s its syntax:
E { text-overflow: keyword; }
The permitted keyword values are clip and ellipsis. The default value
is clip, which acts in the way I just described: Your text is clipped at the
point where it flows out of the container element. But the new value that’s
really interesting is ellipsis, which replaces the last whole or partial char-
acter before the overflow with an ellipsis character—the one that looks
like three dots (...).
Let’s walk through an example using the following CSS:
p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
On this p element, I set the value of overflow to hidden to prevent the
content showing outside of the border, the value of the white-space property
to nowrap to prevent the text from wrapping over multiple lines, and a value
of ellipsis on the text-overflow property. You can see the result, compared
with the default behavior, in Figure 6-7.
Figure 6-7: The text-overflow property with a value of ellipsis (bottom)
The last word in the sentence has been truncated and an ellipsis
used in place of the removed characters, signifying that the line has been
truncated.
