whiteSpace Property (:after, :before, ABBR, ...)

whiteSpace Property

Switch on low bandwidth view

Language Filter

white-space Attribute | whiteSpace Property

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

Syntax

HTML { white-space : sWrap }
Scripting [ sWrap = ] object.style.whiteSpace [ = v ]

HTML	{ white-space : sWrap }
Scripting	[ sWrap = ] object.style.whiteSpace [ = v ]

Possible Values

sWrap String that specifies or receives 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 whitespace are preserved. This possible value is supported in Microsoft Internet Explorer 6 and later 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 renderingit functions like the normal value.
pre-line
Sequences of line breaks are preserved.
pre-wrap
Sequences of line breaks are collapsed.
The property is read/write for all objects except the following, for which it is read-only: currentStyle. The property has a default value of normal for all objects with the following exceptions:
:after pre-line
:before pre-line
PRE pre
The Cascading Style Sheets (CSS) attribute is inherited.
DHTML expressions can be used in place of the preceding value(s). As of Internet Explorer 8, expressions are not supported in IE8 mode. For more information, see About Dynamic Properties.

Remarks

Whitespace, such as line breaks, spaces, and tabs, is collapsed by default in HTML documents. You can use the nonbreaking space entity ( ) to add extra spaces to an object when the whiteSpace property is set to normal or nowrap. You can add extra line breaks using the br element.
This property affects content you access through the Document Object Model (DOM) the same way it affects the way Internet Explorer displays the content.
In Internet Explorer 6 and later, this property applies to the currentStyle element. The pre value of this property is now supported.
Internet Explorer 8. The pre-line and pre-wrap values are used to control sequences of whitespace. A value of pre-line instructs Internet Explorer to combine multiple line breaks into a single line, whereas pre-wrap wraps each newline onto a separate line. Inside a pre block, lines breaks occur at newlines in the source, at occurrences of "\A" in generated content (:before and :after), and as necessary to fill line boxes.

Examples

The following example shows how automatic line breaks are suppressed when the user places the mouse pointer over the paragraph. This is caused by toggling the value of the white-space attribute in the onmouseover and onmouseout events of the p element. When the white-space attribute 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 attribute is set to normal in the onmouseout event, lines break automatically, depending on the width of the element.
<html>

<head>
<style type="text/css">
.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 attribute is 
set to nowrap. Place your mouse over the text to suppress automatic line breaks.</p>

</body>

</html>
This feature requires Microsoft Internet Explorer 5.5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

The following example shows how to set and retrieve the value of the whiteSpace property. When the user sets the value of the whiteSpace property of a div element, the value of the property is retrieved in a span element.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<script type="text/javascript">
function fnSwitch(){
  oDiv.style.whiteSpace = event.srcElement.innerText;
  document.all.oSpan.innerText = oDiv.currentStyle.whiteSpace;
}
</script>
</head>

<body>

<h1>direction Property Sample</h1>
<h2>direction: 
<span id="oSpan" style="color: red"></span></h2>

<p>[ <a href="#" onclick="fnSwitch()">normal</a> | 
<a href="#" onclick="fnSwitch()">nowrap</a> | 
<a href="#" onclick="fnSwitch()">pre</a> 
]</p>
<div id="oDiv" style="background: #e4e4e4; padding: 10px;">
    In   the   source,   this   sentence   has   three   spaces   between   each   word. 
    This sentence 
    takes up three lines 
    in the source. </div>

</body>

</html>
This feature requires Microsoft Internet Explorer 6 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Standards Information

This property is defined in Cascading Style Sheets (CSS), Level 1 (CSS1) .

Applies To

:after, :before, ABBR, ACRONYM, ADDRESS, BASEFONT, BLOCKQUOTE, BDO, BIG, BODY, CENTER, CITE, CODE, currentStyle, CUSTOM, DD, DIV, DIR, DL, DT, EM, FIELDSET, FORM, FONT, hn, HR, ISINDEX, I, INS, KBD, LABEL, LEGEND, LI, LISTING, MENU, OL, P, Q, PLAINTEXT, PRE, S, SMALL, SPAN, STRIKE, STRONG, style, SUB, SUP, TH, TT, U, UL, XMP, CSSCurrentStyleDeclaration Constructor, CSSRuleStyleDeclaration Constructor, CSSStyleDeclaration Constructor

See Also

CSS Enhancements in Internet Explorer 6, pre, wordWrap