Section 18.9. Text Spacing

18.9. Text Spacing

CSS provides several tools for adjusting the space between words or characters in text. Adding space within a line is another way to affect the character or color of a block of text. For example, adding a little extra space between letters is a common technique for calling more attention to a headline or the first line of text on a page. This section introduces the letter-spacing, word-spacing, and white-space properties.

18.9.1. Letter Spacing

Use the letter-spacing property to specify an amount of space to be added between characters.

letter-spacing

---

Values:

     normal | <length> | inherit 

Initial value:

     normal 

Applies to:

All elements

Inherited:

Yes

Figure 18-19 shows an example of a style sheet rule that adds 3 pixels of extra space between the characters in the first line of text.

     p {letter-spacing: 8px; }     <p>Nunc a nisl.</p> 

Figure 18-19. Letter spacing

The default value normal is equivalent to a numeric setting of zero (0). In other words, whatever value you specify is added to the standard character-spacing text. Negative values are permitted and will cause the characters to overlap.

Note that when specifying relative lengths (such as em, which is based on font size), the calculated size will be passed down to child elements, even if they have a smaller font size than the parent.

18.9.2. Word Spacing

Use the word-spacing property to specify an additional amount of space to be placed between the words of the text element.

word-spacing

---

Values:

     normal | <length> | inherit 

Initial value:

     normal 

Applies to:

All elements

Inherited:

Yes

Similar to letter-spacing, the value of word-spacing gets added to the standard space between words. A setting of zero (0) is equivalent to normal and will leave the word spacing unaltered. These examples of word spacing are shown in Figure 18-20.

     p {word-spacing: 1em;}     <p>Nunc a nisl.</p> 

Figure 18-20. Word spacing

Note that when specifying relative lengths (such as em, which is based on font size), the calculated size will be passed down to child elements, even if they have a smaller font size than the parent.

18.9.3. Whitespace

By default, strings of character spaces in the source for an element are collapsed down to one space and line breaks are ignored. In XHTML, the pre element preserves that whitespace and displays the source just as it is typed. The white-space property in CSS does the same thing, and more.

white-space

---

Values:

     normal | pre | nowrap | pre-wrap | pre-line | inherit 

Initial value:

     normal 

Applies to:

All elements (as of CSS 2.1)

Inherited:

Yes

The normal value treats text normally, with consecutive spaces collapsing to one. The pre value displays multiple characters, like the pre element in (X)HTML, except that it has no effect on the font of the element (browsers tend to display pre elements in the monospace font).

Figure 18-21 shows a simple use of the white-space property as specified in this example style and markup.

     p.haiku {white-space: pre; }     <p >         Love's pure silver flame             gives each innermost spirit       invisible warmth.     </p> 

Figure 18-21. The white-space property

nowrap prevents the text element from wrapping unless designated by a <br />. Without a <br />, the text may extend beyond the browser window, requiring horizontal scrolling.

CSS 2.1 introduced two new values for white-space. The pre-wrap value preserves multiple character spaces but allows long lines of text to wrap. Line breaks in the source are also honored. The pre-line value makes multiple character spaces collapse to one, but it preserves new lines in the source. As of this writing, no browser supports the pre-line and pre-wrap values for white-space.