white-space property (Internet Explorer)

Switch View :

Classic

Lightweight

ScriptFree

Site Feedback

white-space property

[This documentation is preliminary and is subject to change.]

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

Syntax

Property 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.

CSS information

Applies To	All elements
Media	visual
Inherited	1
Initial Value

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

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/whitespace.htm


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

The following example shows how to set and retrieve the value of the white-space property. When the user sets the value of the white-space property of a div element, the value of the property is retrieved in a span element.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/whitespace_1.htm


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