CSS white-space – collaping and wrapping of whitespaces and newlines

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 linesSpaces and TabsText wrapping
normalCollapseCollapseWrap
prePreservePreserveNo wrap
nowrapCollapseCollapseNo wrap
pre-wrapPreservePreserveWrap
pre-linePreserveCollapseWrap

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

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

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

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

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

Related

Specification

Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments