Set white-space to pre in HTML and CSS

Description

The following code shows how to set white-space to pre.

Example


<html>
<head>
<!-- ww w  .  j  a  v  a2  s  .c  om-->
<title>The effect of different values of white-space</title>
<style type="text/css">
body {
font: 12px/1.5em Georgia, serif;
}
h1 {
font: bold 12px/1.5em Georgia, serif;
margin: 0.75em 0 0 0;
}
div.pre p {
white-space: pre;
}

</style>
</head>
<body>
<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>
</body>
</html>

Click to view the demo

The code above generates the following result.

Home »
  HTML CSS Tutorial »
    Text »
      CSS Text Style

...
Set paragraph line-height to 150% in HTML a...
Compare text-align all possible values in H...
Set text-align to center in HTML and CSS
Set text-align to justify in HTML and CSS
Set text align to justify to paragraph in H...
Set text-align to left in HTML and CSS
Set text-align to right in HTML and CSS
Compare text-decoration in HTML and CSS
Set text-decoration to line-through in HTML...
Set text-decoration to none for visited anc...
Set text-decoration to overline in HTML and...
Set text-decoration to underline in HTML an...
Set text-decoration to underline overline i...
Set text-decoration to underline overline l...
Compare text-transform in HTML and CSS
Set text-transform to capitalize in HTML an...
Set text-transform to lowercase in HTML and...
Set text-transform to uppercase in HTML and...
Compare all vertical-align settings in HTML...
Compare vertical-align possible values in H...
Compare vertical align values in HTML and C...
Set vertical align for table cells in HTML ...
Set vertical-align to 300% in HTML and CSS
Set vertical-align to 69px in HTML and CSS
Set vertical-align to baseline in HTML and ...
Set vertical align to bottom in HTML and CS...
Set vertical-align to middle in HTML and CS...
Set vertical-align to sub in HTML and CSS
Set vertical-align to super in HTML and CSS
Set vertical-align to text-bottom in HTML a...
Set vertical-align to text-top in HTML and ...
Set vertical-align to top in HTML and CSS
Set white-space to normal in HTML and CSS
Set white-space to nowrap in HTML and CSS

Set white-space to pre in HTML and CSS

Set word-spacing to 10px in HTML and CSS
Set word-spacing to 3em; in HTML and CSS
Set word-spacing to -5px in HTML and CSS
...