Styling Text - Beginning CSS3 - page 68

Breaking Overflow Text
When there are no spaces in text, such as with a long URL, the browser is unable to break it, resulting in an ugly
overflow. All browsers in current use support the word-wrap property to handle this situation. It accepts the
following values:
normal This is the default. Lines may break only at normal word break points.
break-word Lines can break at arbitrary points if no break points can be found.

■ Although word-wrap has been supported by browsers for many years (it first appeared in iE 5.5 in 2000),
it was never officially part of the CSS specification. When the W3C decided to include it in the CSS3 Text module, it
insisted on calling the property overflow-wrap because it's a more accurate description of what the property does.
However, browser manufacturers objected to a name change purely for the sake of linguistic accuracy. After much
debate, the W3C caved in and accepted word-wrap as an official synonym for overflow-wrap . Although overflow-
wrap remains the W3C's preferred name, it's currently not supported by any browser. Use word-wrap instead.

Note

Hiding Overflow Text
To hide overflow text, the overflow property needs to be set to hidden (the overflow property is covered in more
detail in Chapter 6 ). This simply clips the text. A more elegant way to handle the overflow is to add the
text-overflow property, and set its value to ellipsis . For example, the third paragraph in overflow text.html
uses the following class:
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
}

Figure 4-14 shows examples of the same text being broken over several lines using word-wrap , clipped by
setting overflow to hidden , and the excess text being replaced by an ellipsis using a combination of the overflow
and text-overflow properties.

■ Note The text-overflow property is supported by iE 6+, Firefox 7+, Opera 11+, and all versions of Safari and

Chrome.