The white-space property handles white-space inside an element.
It specifies whether white-space should collapse (into a single space).
And whether lines should wrap at the end of a line.
Text with a white-space value of pre-line.
The text will wrap when necessary and on line breaks.
This text is formatted using white-space property.
This text is formatted
using white-space property.
This text is formatted using white-space property.
<style>
.white-space-pre {
max-width: 250px;
border: 2px solid lightblue;
white-space: pre-line;
}
</style>
<p class="white-space-pre">
This text is formatted using white-space property.
This text is formatted<br />using white-space property.
This text is formatted using white-space property.
</p>
white-space: normal | nowrap | pre |
pre-line | pre-wrap | initial | inherit;
| Value | Description |
|---|---|
| normal | Default. Collapses multiple whitespace characters into a single whitespace. Text will wrap when necessary. |
| nowrap | Collapses multiple whitespace characters into a single whitespace. The text will never wrap to the next line. The text continues on the same line until a <br> tag is encountered |
| pre | Browser preserves whitespace. The text will only wrap on line breaks. Acts like the <pre> tag in HTML |
| pre-line | Collapses multiple whitespace characters into a single whitespace. The text will wrap when necessary, and on line breaks |
| pre-wrap | Browser preserves whitespace. The text will wrap when necessary, and on line breaks. |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different white-space values.
This text is formatted using the white-space property. This text is formatted using the white-space property. This text is formatted using the white-space property. This text is formatted using the white-space property.
<style>
.white-space-example {
max-width: 350px;
border: solid 2px lightblue;
white-space: normal;
}
</style>
<p class="white-space-example">
This text is formatted using the white-space property.
This text is formatted using the white-space property.
This text is formatted using the white-space property.
This text is formatted using the white-space property.
</p>
This table shows when white-space support started for each browser.
 Chrome
|
1.0 | Dec 2008 |
 Firefox
|
3.5 | Jun 2009 |
 IE/Edge
|
8.0 | Mar 2009 |
 Opera
|
9.5 | Jun 2008 |
 Safari
|
3.0 | Jun 2007 |
