CSS whitespace property is used to describe how whitespace inside the element is handled. This property specifies two things:
- Whether and how white space inside the element is collapsed
- Whether lines will wrap at opportunities
CSS property white-space
| CSS version: | CSS 2.1 |
| Value: | normal | pre | nowrap | pre-wrap | pre-line |
| Initial: | normal |
| Applies to: | all elements |
| Inherited: | yes |
white-space values
| New lines | Spaces and Tabs | Text wrapping | |
|---|---|---|---|
| normal | Collapse | Collapse | Wrap |
| pre | Preserve | Preserve | No wrap |
| nowrap | Collapse | Collapse | No wrap |
| pre-wrap | Preserve | Preserve | Wrap |
| pre-line | Preserve | Collapse | Wrap |
Example – white-space normal
This is default case. Newlines, spaces and tabs will collapse and text will wrap.
<style>
div {
width: 200px; height: 100px;
background-color: lightgreen;
white-space: normal;
}
</style>
<div>
This is some text which is used as an example for css white-space property.
Second line.
</div>Example – white-space pre
Newlines, spaces and tabs will be preserved and text will not wrap.
<style>
div {
width: 200px; height: 100px;
background-color: lightgreen;
white-space: pre;
}
</style>
<div>
This is some text which is used as an example for css white-space property.
Second line.
</div>Example – white-space nowrap
Newlines, spaces and tabs will collapse and text will not wrap.
<style>
div {
width: 200px; height: 100px;
background-color: lightgreen;
white-space: nowrap;
}
</style>
<div>
This is some text which is used as an example for css white-space property.
Second line.
</div>Example – white-space pre-wrap
Similar to pre but allows text to wrap.
<style>
div {
width: 200px; height: 100px;
background-color: lightgreen;
white-space: pre-wrap;
}
</style>
<div>
This is some text which is used as an example for css white-space property.
Second line.
</div>Example – white-space pre-line
Similar to normal but preserves newline.
<style>
div {
width: 200px; height: 100px;
background-color: lightgreen;
white-space: pre-line;
}
</style>
<div>
This is some text which is used as an example for css white-space property.
Second line.
</div>Related
- CSS overflow - visible, hidden and scroll for overflowing content
- CSS text-overflow - truncate text with three dots
- HTML pre tag tutorial
- CSS clip
