# 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; }`

:

## See also

- the `word-break` and `overflow-wrap` properties
  that allow you to move the letters of a long word to a new line
- the `tab-size` property
  that sets the size of the indent created by the Tab key
- the `hyphens` property
  that enables hyphenation of words by syllables
- the `overflow` property
  that cuts off parts that extend beyond the block boundary
- the `pre` tag
  that shows the text as it was typed in the HTML code editor

← →
↑
en ru