white-space

Article
10/10/2017

Sets a value that indicates whether lines are automatically broken inside the object.

Syntax

{ white-space: sWrap }

Possible values

sWrap

String that specifies one of the following values:

normal	Default. Lines of text break automatically. Content wraps to the next line if it exceeds the width of the object.
nowrap	Line breaks are suppressed. Content does not wrap to the next line.
pre	Line breaks and other white space are preserved. This possible value is supported in when the !DOCTYPE declaration specifies standards-compliant mode. When the !DOCTYPE declaration does not specify standards-compliant mode, you can retrieve this value, but it does not affect rendering; it functions like the normal value.
pre-line	Sequences of line breaks are preserved.
pre-wrap	Sequences of line breaks are collapsed.

The property has a default value of normal. It is inherited.

Remarks

White space, such as line breaks, spaces, and tabs, is collapsed by default in HTML documents. You can use the non-breaking space entity ( ) to add extra spaces to an object when the white-space property is set to normal or nowrap. You can add extra line breaks using the BR element.

Examples

The following example shows how automatic line breaks are suppressed when the user places the pointer over a paragraph. This is caused by toggling the value of the white-space property in the onmouseover and onmouseout events of the P element. When the white-space property is set to nowrap in the onmouseover event, line breaks are suppressed, and horizontal scrolling is required to view content wider than the element. When the property is set to normal in the onmouseout event, lines break automatically, depending on the width of the element:

<html>
  <head><style>
      .clsOneliner  {white-space: nowrap}
      .clsAutoBreak {white-space: normal}
  </style>
    </head>
<body>
<p ONMOUSEOVER="this.className='clsOneliner';" 
        ONMOUSEOUT="this.className='clsAutoBreak';">
Long lines of text remain unbroken when the value of the whitespace 
property is set to nowrap. Place your mouse over the text to 
suppress automatic line breaks.</p>
  </body>
</html>

Standards information

This property is defined in Cascading Style Sheets (CSS), Level 1 (CSS1) Ee371236.xtlink_newWindow(en-us,Expression.40).png .

Applies to

:after, :before, abbr, acronym, address, big, blockquote, body, center, cite, code, dd, dir, div, dl, dt, em, fieldset, font, form, hn, hr, i, ins, kbd, label, legend, li, listing, menu, ol, p, plaintext, pre, q, s, small, span, strike, strong, style, sub, sup, th, tt, u, ul, xmp