Dealing with Whitespace
Description
Whitespace is usually collapsed or ignored in HTML.
To preserve the formatting of the text as it is in the source HTML document,
use the whitespace property.
The allowed values for the whitespace property are described as follows.
- normal - Default value. Whitespace is collapsed, and lines are wrapped.
- nowrap - Whitespace is collapsed, but lines are not wrapped.
- pre - Whitespace is preserved, and text will wrap only on line breaks. the same as
preelement. - pre-line - Whitespace is collapsed, and text will wrap to make lines fit or when a line break is encountered.
- pre-wrap - Whitespace is preserved, and text will wrap to make lines fit or when a line break is encountered.
Example
The following code demonstrates the whitespace property.
<!DOCTYPE HTML>
<html>
<head>
<style>
#mytext { width: 400px; margin: 5px;
padding: 5px;
border: medium double black;
background-color: lightgrey;
white-space: pre-line;<!--from ww w . jav a 2 s . com-->
}
div.pre p {
white-space: pre;
}
p {
white-space: normal;
}
</style>
</head>
<body>
<p id="mytext">
This
is
a
test;
</p>
<div class="pre">
<h1>white-space: pre</h1>
<p> this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test.
this is a test. </p>
</div>
<p> this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test.
this is a test. </p>
</body>
</html>