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