White-spacing part 2

• COURSES
• CODE PLAYGROUND
• DISCUSS
• TOP LEARNERS

white-spacing

84

2/2

   

The white-space Values

The white-space property also supports other values:
pre - text will only wrap on line breaks and white space
pre-line - text will wrap where there is a break in code, but extra white space is still ignored
pre-wrap - text will wrap when necessary, and on line breaks

Here is an example in which all three values are used:

The HTML:<p class="pre">
In the markup we have multiple spaces
and a line break.
</p>
<p class="preline">
In the markup we have multiple spaces
and a line break, but in the result multiple spaces are ignored.
</p>
<p class="prewrap">
In the markup we have multiple
spaces and a line break.
</p>
The CSS:

p.pre {
white-space: pre;
}
p.preline {
white-space: pre-line;
}
p.prewrap {
white-space: pre-wrap;
}Try It Yourself

Result:
Pre-wrap value behaves as the pre value, except that it adds extra line breaks to prevent the text breaking out of the element's box.