HOLLA TECH - LEARN

The white-space Property
 

The white-space property specifies how white-space inside an element is handled. The values can be set as normal, inherit, nowrap, etc.

The nowrap value makes the text continue on the same line until a <br> tag is encountered, and also collapses all sequences of whitespace into a single whitespace.

The HTML:

<p>
This paragraph has         multiple spaces      and
a line break, but it will be ignored, as we used the nowrap value.
</p>

 

The CSS: 

p {
   white-space: nowrap;
}

 

Result: 

Holla Tech - Learn CSS

NOTE!
The text will continue on the same line until a <br /> tag is encountered.
 


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;
}

 

Result: 

Holla Tech - Learn CSS

NOTE!
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.

BACK NEXT

CLICK ON THE BUTTON BELOW TO GO TO THE CSS MAIN COURSE PAGE. 

CSS MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT