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 ortext-wrap
property (below). Therefore, to control text wrapping the use of thewhite-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.