The white-space property

The white-space property sets how to wrap text to a new line, as well as how to display white spaces between words and line breaks (places where Enter was pressed when typing code).

Syntax

selector {
	white-space: nowrap | pre | pre-line | pre-wrap | normal;
}

Values

Value	Description
`nowrap`	Prevents text from wrapping onto another line, even if it does not fit into the width of the container (in this case, the text will simply extend beyond its borders). However, adding the `br` tag will cause the text to wrap to a new line.
`pre`	The text is shown as it was typed in notepad when laying out the site: with all spaces and enters (if several spaces are typed in the code, there will also be several on the screen). In this case, the browser will not wrap the text on a new line if it does not fit into the container - the text will simply fall outside its boundaries. An analogue of the pre tag, but unlike it, it does not change the font to monospace (for monospace font, see the `font-family` property.
`pre-wrap`	The same as pre, the difference is that if the text is too long and does not fit into the container, the browser will move it to another line.
`pre-line`	The browser only takes into account Enters in the HTML code and ignores everything else (several spaces will look like one, the browser itself places line breaks).
`normal`	Standard behavior: the browser itself places line breaks so that the words fit into the container. Multiple spaces in code will appear as one on screen.

Default value: normal.

Example . The nowrap value

In this example, the text will not fit into the container and will extend beyond its boundaries, since the nowrap value is set:

<div id="elem">
	Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: nowrap;
	border: 1px solid red;
}

Example . The nowrap value and br tag

If you add the br tag, the text will be moved to a new line (exactly in the place where br appears):

<div id="elem">
	Lorem ipsum dolor sit <br> amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: nowrap;
	border: 1px solid red;
}

Example . The pre value

In this example, the text is shown as it was typed in the HTML code editor (with all indentations using the Tab key, with Enter, and so on):

<div id="elem">
	Lorem ipsum
	
		dolor sit amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: pre;
	border: 1px solid red;
}

Example . The pre-wrap value

And now the text is shown as it was typed in the HTML code editor, however, the parts that appear are moved to a new line:

<div id="elem">
	Lorem ipsum
	
		dolor sit amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: pre-wrap;
	border: 1px solid red;
}