HTML and CSS Reference
In-Depth Information
white-space
Initial value:
normal
| Inherited: Yes | Applies to: All Elements | CSS2.1
Browser support: IE 5.5+, Firefox 1+, Chrome 1+, Opera 4+, Safari 1+
The
white-space
property determines how white space inside an element is handled. Consider the first paragraph
of the Cool Shoes & Socks page as an example:
<p>Nulla facilisi. Ut porttitor sollicitudin nisi, tempus pulvinar nisl volut-
pat aliquet. Phasellus posuere auctor accumsan. Ut in odio eget dui pulvinar
sollicitudin. Sed vitae tortor nibh. Aenean nec sapien quam, sit amet dapibus
lorem. Phasellus ac pharetra tellus. Curabitur pretium eros sit amet nisl pre-
tium mollis.</p>
With
white-space
set to its initial value of
normal
, white space is collapsed (meaning any space within this
HTML does not take effect), and lines are wrapped (broken and pushed onto a new line) where necessary to fill the
containing element. So the following achieves the same visual representation as the preceding example:
<p>Nulla facilisi. Ut porttitor sollicitudin nisi, tempus pulvinar nisl volut-
pat aliquet. Phasellus posuere auctor accumsan.
Ut in odio eget dui pulvinar sollicitudin. Sed vitae tortor nibh. Aenean nec
sapien quam, sit amet dapibus lorem. Phasellus ac pharetra tellus. Curabitur
pretium eros sit amet nisl pretium mollis.</p>
You also can use the following values with
white-space
:
•
pre
—White space isn't collapsed, and lines are broken only when they are broken in the HTML.
•
nowrap
—White space is collapsed as per
normal,
but lines of text are never wrapped.
•
pre-wrap
—White space isn't collapsed, but lines are wrapped where necessary or when broken in the
HTML.
•
pre-line
—White space is collapsed, and lines are wrapped where necessary or when broken in the
HTML
overflow-wrap and word-wrap
Initial value:
normal
| Inherited: Yes | Applies to: All Elements | CSS3
Browser support: IE 5.5+, Firefox 3.5+, Chrome 1+, Opera 10.5+, Safari 1+
word-wrap
is another of those properties that was introduced by Microsoft and was later added to the
CSS3 specification. It has undergone a little bit of a makeover in the CSS3 Text module (
www.w3.org/TR/
