CSS - white-space Property
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>
To Continue Learning Please Login
Login with Google