CSS - white-space Property

Previous
Quiz

The white-space property is used to control the white space flow inside the text in an element.

Possible Values

  • normal: Default value, where sequences of white spaces are collapsed, and text wraps to the next line when it reaches the available width.

  • nowrap: White spaces are collapsed, and text does not wrap to the next line. It continues on the same line, overflowing the available width.

  • pre: Preserves white spaces exactly as they are in the HTML code. Line breaks and multiple white spaces are displayed as they are.

  • pre-wrap: Preserves line breaks and white spaces as they are in the HTML code.

  • pre-line: Collapses white spaces, but preserves line breaks. Text wraps when it reaches the available width.

  • break-spaces: Collapses sequences of white spaces, but preserves line breaks and wrap opportunities. This is an experimental value and may not be supported in all browsers.

  • initial: Sets the value to its default value, which is normal.

  • inherit: Inherits the value from its parent element.

Applies to

All the Block level elements.

DOM Syntax

 object.style.whiteSpace = "pre";

Example

Here is an example:

 <html> <head> <style> div {border:2px solid red; padding: 5px; margin: 2px; width: 300px; height: 100px;} </style> </head> <body> <h2>White Space</h2> <h4>normal</h4> <div> <p style="white-space: normal;">white space refers to any empty space or characters that do not display a visible symbol or have any effect on the text's meaning</p> </div> <h4>pre</h4> <div> <p style="white-space: pre;">white space refers to any empty space or characters that do not display a visible symbol or have any effect on the text's meaning</p> </div> <h4>nowrap</h4> <div> <p style="white-space: nowrap;">white space refers to any empty space or characters that do not display a visible symbol or have any effect on the text's meaning</p> </div> <h4>pre-wrap</h4> <div> <p style="white-space: pre-wrap;">white space refers to any empty space or characters that do not display a visible symbol or have any effect on the text's meaning</p> </div> <h4>pre-line</h4> <div> <p style="white-space: pre-line;">white space refers to any empty space or characters that do not display a visible symbol or have any effect on the text's meaning</p> </div> <h4>break-spaces</h4> <div> <p style="white-space: break-spaces;">white space refers to any empty space or characters that do not display a visible symbol or have any effect on the text's meaning</p> </div> </body> </html>
Print Page
Previous
Next
Advertisements