CSS White-space property
What is Whitespace
Whitespace is a set of characters used to separate tokens in HTML, CSS, JavaScript, and other computer languages.
HTML
In HTML Living Standard, 5 characters are specified as ASCII whitespace. They are:
- U+0009 TAB
- U+000A LF
- U+000C FF
- U+000D CR
- U+0020 SPACE
JavaScript
Common whitespaces in JavaScript are:
- U+0009 CHARACTER TABULATION <TAB>
- U+000B LINE TABULATION <VT>
- U+000C FORM FEED <FF>
- U+0020 SPACE <SP>
- U+00A0 NO-BREAK SPACE <NBSP>
- U+FEFF ZERO WIDTH NO-BREAK SPACE <ZWNBSP>
CSS syntax
element {
whitespace: normal;
}Value Details
normal
Sequences of white space are collapsed. Newline characters in the source are handled the same as other white space. Lines are broken as necessary to fill line boxes.
nowrap
Collapses white space as for normal, but suppresses line breaks (text wrapping) within the source.
pre
Sequences of white space are preserved. Lines are only broken at newline characters in the source and at <br> elements.
pre-wrap
Sequences of white space are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
pre-line
Sequences of white space are collapsed. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
break-spaces
The behavior is identical to that of pre-wrap, except that: Any sequence of preserved white space always takes up space, including at the end of the line. A line breaking opportunity exists after every preserved white space character, including between white space characters. Such preserved spaces take up space and do not hang, and thus affect the box’s intrinsic sizes (min-content size and max-content size).
Notes
Normally set value to be nowrap and combine it with css property overflow-x: auto; on the parent container so that text can fit within one line and not be auto collapsed.