<div class="container">
<!-- In the source code every line of the poem is on its own line, a newline character iavailable at the end of each line. -->
<div class="demo demo-1"><!--remove the newline character between the HTML tag and "Mary" to sthat affects the text rendered on the page-->Mary had a little lamb,
Its fleece was white as snow;
And everywhere that Mary went
The lamb was sure
It followed her to school one day,
Which was against the rule;
It made the children laugh and play
To see a lamb at s
And so the teacher turned it out,
But still it lingered near,
And waited patiently about
Till Mary did a
Why does the lamb love Mary so?
The eager children cry;
Why, Mary loves the lamb, you know,
The teacher did reply.<!--here is the last newline character inserted, if you remove it, i.the backspace key to bring the closing tag up on the same line, the resulting white space rewon't be affected.-->
</div>
<div class="demo demo-2">
This sentence started off with 6 extra spaces and doesn't wrap.
</div>
<div class="demo demo-3">
This sentence started off with 6 extra spaces but they are collapsed into one, and
newline
characters
are
preserved
+ lines wrap when necessary to fit inside container (unlike the previous demo where thoverflowed).
</div>
</div>
body {
background-color: #ddd;
color: #555;
font-size: 1.3em;
line-height: 1.5;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 300;
}
.container {
margin: 20px auto;
max-width: 700px;
}
/* Try removing the white-space property to see how the browser will strip out the newline characters */
.demo {
background-color: #0099cc;
color: white;
padding: 2em;
margin: 20px 0;
float: left;
font-size: 1.2em;
max-width: 100%;
}
.demo-1 {
white-space: pre;
}
.demo-2 {
white-space: nowrap;
max-width: 400px;
}
.demo-3 {
white-space: pre-line;
}