The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

72 Chapter 6

Hyphenating Words

If you’d prefer an extra option for breaking words over multiple lines, you

can use hyphenation. Long a standard of print, hyphens indicate where

the break in a word occurs. You can hyphenate your text already in HTML,

using the soft-hyphenation symbol entity, ­—although this requires that

you mark up all of your content, which is not always an option.

CSS3 makes this somewhat easier through the hyphens property:

E { hyphens: keyword; }

hyphens has three possible keyword values: manual hyphenates words

only where a hyphenation suggestion exists in the markup—that is, using

the soft-hyphenation symbol mentioned in the previous paragraph; auto

hyphenates words at an appropriate point even if no hyphenation sugges-

tions are present; and none never hyphenates words, even if suggestions are

present.

WArninG Automatic hyphenation only occurs when the language of a document has been speci-

fied, and the browser has access to a hyphenation dictionary of that language.

You can see an example of hyphenation in Figure 6-9. The paragraph

on the left has no hyphenation applied, whereas the paragraph on the

right has a value of auto; the word “conversations” (highlighted) has been

hyphenated and broken over two lines by the browser.

Figure 6-9: The paragraph on the right has automatic hyphenation enabled

The hyphens property currently has a rather piecemeal implementation:

it’s in IE10+, Firefox, and Safari, with the relevant vendor prefix for each,

but has recently been pulled from Chrome (where automatic hyphenation

was not supported anyway). It’s also in Safari for iOS.

Resizing Elements

Another new property that’s useful for elements whose contents are wider

than their container is the resize property. This property lets you control

an element’s dimensions by providing a handle with which you can drag the

element out to a different size.