CSS Wrap - white-space
Description
Use the white-space property to change the way text is wrapped or not wrapped, to explicitly set how new lines in text are displayed and to set whether the formatting of text in the html document should remain when displayed in the browser (like the html pre tag).
Note: applies to text in block-level elements.
Default is
normal
white-space: none;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 2.1 */
white-space: inherit;
See also: text-indent, text-align, text-decoration, text-transform.
Examples for white-space
Example 1:
An example showing normal and nowrap settings. The value nowrap tells the browser to keep all the text in one line:
| This is text within cell 1 that is displayed with a white-space value of normal. |
This is text within cell 1 that is displayed with a white-space value of nowrap. |
<style>
#table1 { width:50%; height:75px; }
#td1 { white-space: normal; width:50%; border:1px solid black; }
#td2 { white-space: nowrap; width:50%; border:1px solid black; }
</style>
<table id="table1">
<tr>
<td id="td1">This is text within cell 1 that is displayed with a white-space value of normal.</td>
<td id="td2">This is text within cell 1 that is displayed with a white-space value of nowrap.</td>
</tr>
</table>
Example 2:
This example shows the use of the value
pre. Using this value you can make an html element behave like the html <pre> tag. This means that
the browser will display the text with the same formatting that it has in the html file:
This example shows the use of the value pre.
Using
this
value
you can make
an
html
element
behave
like
the
html
pre
tag.
<style>
#test2 { white-space: pre; }
</style>
<div id="test">
This example shows the use of the value pre.
Using
this
value
you can make
an
html
element
behave
like
the
html
pre
tag.
</div>
Values for white-space
| white-space |
normal
nowrap
pre
pre-wrap
pre-line
inherit |
Use the white-space property to change the way text is wrapped or not wrapped, to explicitly set how new lines in text are displayed and to set whether the formatting of text in the html document should remain when displayed in the browser (like the html pre tag). |