The white-space declaration allows you to tweak the wrapping of an element.
See also the specification.
pre-line buggy in IE9| Selector | IE 5.5 | IE 6 | IE 7 | IE8 | IE9 pr3 | FF 3.0 | FF 3.5 | FF 3.6 | FF 4b1 | Saf 4.0 Win | Saf 5.0 Win | Chrome 4 | Chrome 5 | Opera 10.10 | Opera 10.53 | Opera 10.60 | Konqueror 4.x |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
nowrap
|
Yes | Yes | Yes | Yes | Yes | To be tested | |||||||||||
|
pre
|
No | Yes | Yes | Yes | Yes | Yes | To be tested | ||||||||||
|
pre-wrap
|
No | Yes | Yes | Yes | Yes | Yes | To be tested | ||||||||||
|
pre-line
|
No | Yes | Buggy | No | Yes | Yes | Yes | Yes | To be tested | ||||||||
|
|||||||||||||||||
Test sheet:
p.test {
border: 1px solid #000000;
padding: 5px;
width: 300px;
}
I add the relevant white-space value inline.
This value suppresses all line breaks in the element, except where it contains <br />s or <wbr />s.
This is the test paragraph with white-space: nowrap.
It has all kinds of odd tabs and spacing in
the
HTML source code.
Should they be preserved?
If the line of code stretches beyond the right border of the page, the browser should generate a horizontal scrollbar.
This value makes the element behave as a <pre>: all line breaks, tabs and other oddities of the source code
are literally followed.
This is the test paragraph with white-space: pre.
It has all kinds of odd tabs and spacing in
the
HTML source code.
Should they be preserved?
This value behaves as the pre value, except that it adds extra line breaks to prevent the text breaking out of
the element's box.
This is the test paragraph with white-space: pre-wrap.
It has all kinds of odd tabs and spacing in
the
HTML source code.
Should they be preserved?
Opera renders it like this:
As far as I understand this value ignores tabs and multiple spaces, but it breaks off the text at hard returns in the source code, as well as when it's necessary to prevent the text from breaking out of its box.
This is the test paragraph with white-space: pre-line.
It has all kinds of odd tabs and spacing in
the
HTML source code.
Should they be preserved?
iCab renders it like this:
