Home >>CSS Tutorial >CSS White Space

CSS White Space

CSS White Space

The CSS white space property is used to control how to display the text wrapping and white-spacing within an element. It is used to handling of white spaces in an element.

Syntax: White-space: normal| pre| pre-line| pre-wrap| nowrap | initial |inherit;

CSS White Space values

There are many white space values used to display the content inside an element.

value Description
Nowrap Into a single whitespace the sequences of whitespace will collapse. While using this property the text is continues on the same line, it never wrap to the next line until a <br> tag is used.
Normal This is default value. In this value, sequences of white space collapse & text is wrapped when necessary.
pre-line While using this value the text will wrap when necessary, and on line break. In this, Sequence of whitespace will collapse into a single whitespace.
Pre By using this property, text will wrap on line breaks. Whitespace is preserved by the browser. It act like html <pre> tag
pre-wrap In pre-wrap the text will wrap when necessary, and on line break. Whitespace is preserved by the browser.
Initial set this property to its default value.
Inherit It inherit this property from its parent element.

nowrap

While using this property the text is continues on the same line, it never wrap to the next line until a <br> tag is used. The sequences of spaces are combined into one. The text is remains on a single line.

Let's take an example of nowrap property:

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
        div { 
            width: 300px; 
            height: 300px; 
            white-space: nowrap; 
            background-color: #f5b0c6; 
            color: black; 
            font-size: 25px; 
        } 
    </style> 
</head> 
<body> 
    <center> 
        <div> 
           This text contains nowrap property.
            </div> 
    </center> 
</body> 
</html>
This text contains nowrap property.

normal

In this value, sequences of white space collapse & text is wrapped when necessary. This is default value. The sequences of spaces are combined into one and it ignored the line breaks.

Let's take an example of normal property:

<!DOCTYPE html> 
<html> 
  <head> 
    <style> 
        div { 
            width: 450px; 
            height: 250px; 
            white-space: normal; 
            background-color: #f5b0c6; 
            font-size: 60px; 
        } 
    </style> 
</head> 
<body> 
    <center> 
        <div> 
            Phptpoint: 
            <br> 
            This text contains normal property. 
        </div> 
    </center> 
</body> 
  </html>
Phptpoint:
This text contains normal property.

pre-line

While using this value the text will wrap when necessary, and on line break. In this, Sequence of whitespace will collapse into a single whitespace. Only new lines are preserved. when reaching the end of the element, Lines break on new lines.

Let's take an example of Pre-line property:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
		div { 
			width: 300px; 
			height: 200px; 
			white-space: pre-line; 
			background-color: #f5b0c6;; 
			color: black; 
			font-size: 25px; 
		} 
	</style> 
</head> 
<body> 
<center> 
<div> 
This text contains pre-line property. 
</div> 
</center> 
</body> 
</html>
This text contains pre-line property.

Pre

By using this property, text will wrap on line breaks. Whitespace is Exactly preserved by the browser. It act like html

 tag. Line breaks only on new line and 
.

 

Let's take an example of Pre property:



<!DOCTYPE html> 
<html> 
<head> 
<style> 
		div { 
			width: 300px; 
			height: 200px; 
			white-space: pre; 
			background-color:  #f5b0c6; 
			color: black; 
			font-size: 25px; 
		} 
	</style> 
</head> 
<body> 
	<center> 
		<div> 
		    This text contains pre property.
		</div> 
	</center> 
</body> 
</html> 
This text contains pre property.

pre-wrap

In pre-wrap the text will wrap when necessary, and on line break. Whitespace is preserved by the browser. In this the whitespace is mostly preserved.

Let's take an example of Pre-wrap property:

<!DOCTYPE html> 
<html> 
<head>
	<style> 
		div { 
			width: 300px; 
			height: 300px; 
			white-space: pre-wrap; 
			background-color: #f5b0c6;
			font-size: 25px; 
		} 
	</style> 
</head> 
<body> 
	<center> 
		<div> 
			This text contains pre-wrap property.
		</div> 
	</center> 
</body> 
</html> 
This text contains pre-wrap property.

Popular Tutorials