CSS - white-space



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> 
Advertisements