The white-space CSS property is used to control how white space characters are handled within an element’s content. It determines whether multiple white spaces are collapsed into a single space, whether lines can wrap, and how line breaks are treated.
The white-space property accepts several values:
-
normal: This is the default value. Sequences of white spaces are collapsed into a single space. Line breaks are treated as a single space, and text will wrap to the next line when necessary. -
nowrap: White spaces are not collapsed, and text will not wrap to the next line. It will overflow the element’s boundaries if necessary. -
pre: Sequences of white spaces are preserved, and line breaks are treated as line breaks in the content. Text will only wrap if a line break is explicitly inserted. -
pre-wrap: Sequences of white spaces are preserved, and line breaks are treated as line breaks in the content. Text will wrap to the next line if necessary. -
pre-line: Sequences of white spaces are collapsed into a single space, and line breaks are treated as line breaks in the content. Text will wrap to the next line if necessary.
Here’s an example:
.text-element {
white-space: nowrap;
}
In this example, the .text-element class sets the white-space property to nowrap. This prevents white spaces from collapsing and ensures that the text does not wrap to the next line. It will overflow the element if it exceeds the available width.
The white-space property can be useful when you want to control how white spaces and line breaks are rendered within an element, such as when displaying code snippets or preserving the formatting of text. It allows you to fine-tune the presentation of text content and adjust the wrapping behavior as needed.