CSS: white-space Line Break
white-space Property
The
white-space
property controls
line break at whitespace positions, and whether repeated whitespaces are collapsed into one single whitespace.
Possible values:
normal
-
- Newline character is ignored.
- Long line is wrapped at the edge.
(Like in
p
tag.) pre
-
- Newline character force a wrap.
- No automatic line wrap.
(Like in
pre
tag.)This is very useful, when you have poem, song lyrics, or code, you want line wrap at newline positions, and no need to add
br
tag at the end of every line. pre-wrap
-
- Newline character force a wrap.
- Long line is wrapped.
This is very useful, like
pre
tag that respect newline char, but also, if line is too long, auto wrap it. pre-line
-
Like
pre-wrap
, but repeated spaces are shrinked into just one space. break-spaces
-
Same as
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 andmax-content
size).
nowrap
-
No wrap.
Summary:
respect newline char | preserve spaces and tabs | wrap long line | End-of-line spaces | |
---|---|---|---|---|
normal | no | no | ✅ | Remove |
pre | ✅ | ✅ | no | Preserve |
pre-wrap | ✅ | ✅ | ✅ | Hang |
pre-line | ✅ | no | ✅ | Remove |
break-spaces | ✅ | ✅ | ✅ | Wrap |
nowrap | no | no | no | Remove |
white-space: normal
p {white-space:normal;}
This is the normal behavior of the paragraph element <p>
.
- Repeated spaces shrink into a single one.
- Newline character is equivalent to a space.
- Text longer than the element's width are wrapped.
white-space: pre
p {white-space:pre;}
With white-space: pre
, the behavior is the same as the <pre>
element.
- White space sequences are shown as they are.
- Newline character force a wrap.
- The element's width has no effect on the line wrapping.
white-space: pre-wrap
p { white-space:pre-wrap; width:60ch; }
With white-space:pre-wrap
, it's like mix of pre
, and normal
.
- Repeated spaces are NOT shrinked into just one space.
- Newline force a wrap.
- Long lines are automatically wrapped.
This is very useful for computer code, even better than pre
, because if you have a long line comment, it'll be wrapped in the display, but when user copies the code, there will not be extra newline.
For example:
# python 3 # Here is a very long comment. long01 long02 long03 long04 long05 long06 long07 long08 long09 long10 long11 long12 long13 long14 long15 long16 long17 print (5)
white-space: pre-line
This is just like pre-wrap
, except that repeated spaces are shrinked into just one space.
white-space: nowrap
p { white-space:nowrap; width:60ch; }
- Repeated spaces shrink into a single one.
- Newline char is equivalent to space. (no wrap)
- The element's width has no effect on line wrapping.
- All text becomes one single very long line, even longer than window width.
- No wrap whatsoever.
- The only wrap is if you have
<br>
.
Non-Breaking Whitespace
To prevent a line wrap at positions you do not want to happen, use the
Unicode character named NO-BREAK SPACE. Its decimal value is 160, hexadecimal is
A0. The HTML entity is
.
〔see HTML: XML Entities (Special Characters)〕