Text Wrapping and White Space Handling Properties

white-space

white-space: normal

equivalent to white-space-collapsing: collapse; text-wrap: normal:

• Any sequence of multiple consecutive spaces and other whitespace is collapsed and treated as a single space.
• Line breaks (new lines) and tabs are treated as any other whitespace.
• Content will automatically wrap onto additional lines as necessary based on the limitations of the available space. Wrapping will usually occur where breakable white space occurs in the HTML code.

white-space: nowrap

equivalent to white-space-collapsing: collapse; text-wrap: none; should be used instead of the <nobr> tag (deprecated):

• Any sequence of multiple consecutive spaces and other whitespace is collapsed and treated as a single space.
• Line breaks (new lines) and tabs are treated as any other whitespace.
• Content only appears on a new line where line breaks occur in the HTML source.

white-space: pre

equivalent to white-space-collapsing: preserve; text-wrap: none:

• Sequences of whitespace including line breaks (new lines) and tabs are preserved.
• Content only appears on a new line where line breaks occur in the HTML source.
• White space characters indenting HTML code or text at the beginning of a line are preserved like any other white space.

white-space: pre-line

equivalent to white-space-collapsing: preserve-breaks; text-wrap: normal:

• Line breaks (new lines) are preserved.
• Any white space characters indenting HTML code or text at the beginning of a line, which would normally be collapsed with the preceding new line character, are ignored.
• Any other sequence of multiple consecutive spaces and other whitespace (excluding line breaks mentioned above) is collapsed and treated as a single space.
• Tabs are treated as whitespace.
• Content will automatically wrap onto additional lines as necessary based on the limitations of the available space. Wrapping will usually occur where breakable white space occurs in the HTML code.

white-space: pre-wrap

equivalent to white-space-collapsing: preserve; text-wrap: normal:

• Sequences of whitespace including line breaks (new lines) and tabs are preserved.
• Content will automatically wrap onto additional lines as necessary based on the limitations of the available space. Wrapping will usually occur where breakable white space occurs in the HTML code.
• White space characters indenting HTML code or text at the beginning of a line are preserved like any other white space.

Select which white-space property to use

White Space Handling		text-wrap		use CSS style
New Lines, Spaces & Tabs
collapse		normal (wrap)		white-space: normal
collapse		not wrapped		white-space: nowrap
preserve		not wrapped		white-space: pre
preserve		normal (wrap)		white-space: pre-wrap
New Lines	Spaces & Tabs	text-wrap		use CSS style
preserve	collapse	normal (wrap)		white-space: pre-line
preserve	collapse	not wrapped		white-space-collapsing:   preserve-breaks; text-wrap: no
(not recommended)

word-wrap: normal

word-wrap: break-word

Some browsers do not support the white-space-collapsing property or text-wrap property (below). Therefore, to control text wrapping the use of the white-space property (above) is recommended unless a specific capability, such as decimal point alignment, is required.

text-wrap: normal

Content will automatically wrap onto additional lines as necessary based on the limitations of the available space. Wrapping will usually occur where breakable white space occurs in the HTML code.

text-wrap: none

Content from one line of the source will not wrap onto additional lines.

text-wrap: suppress

Like text-wrap: none, the text will start on a new line if it all cannot fit on the current line. But it will wrap onto additional lines if it does not fit on a single line.

text-wrap: unrestricted

Content can wrap onto additional lines between any two characters, even in the middle of a word, based on the limitations of the available space.

white-space-collapsing: collapse

• Any sequence of multiple consecutive spaces and other whitespace is collapsed and treated as a single space.
• Line breaks (new lines) and tabs are treated as any other whitespace.
• Any white space characters indenting HTML code or text at the beginning of a line are ignored.

white-space-collapsing: discard

Any sequence of white space characters is treated as a single Unicode zero-width non-joiner (‌). This might be used to keep the letters of an acronym (initialism) separate, in a language where ligatures combining adjacent characters are common.

white-space-collapsing: trim-inner

Any leading or trailing white space in a block is ignored.

white-space-collapsing: preserve

All white space is preserved, including any white space characters indenting HTML code or text at the beginning of a line.

white-space-collapsing: preserve trim-inner

In addition to white-space-collapsing: preserve processing, any leading or trailing white space in a block is ignored.

white-space-collapsing: preserve-breaks

• Line breaks (new lines) are preserved. Content only appears on a new line where line breaks occur in the HTML source.
• Any white space characters indenting HTML code or text at the beginning of a line, which would normally be collapsed with the preceding new line character, are ignored.
• Any other sequence of multiple consecutive spaces and other whitespace (excluding line breaks mentioned above) is collapsed and treated as a single space.
• Tabs are treated as whitespace.

white-space-collapsing: preserve-breaks trim-inner

In addition to white-space-collapsing: preserve-breaks processing, any leading or trailing white space in a block is ignored.