style.whiteSpaceは、要素のスタイル属性のwhite-spaceプロパティの値を取得、もしくは、設定するプロパティ。
white-spaceプロパティは、空白（スペース）、タブ、改行の取扱いを指定することができる。
構文
取得
var $whiteSpace = $elementReference.style.whiteSpace;
戻り値
要素のスタイル属性のwhite-spaceプロパティの値。
設定
$elementReference.style.whiteSpace = "normal | nowrap | pre | inherit";
- normal | nowrap | pre | inherit
- 下記の何れかの値を指定する。初期設定値は「normal」。
- normal：連続する空白、タブ、改行を、１つの空白、タブ、改行にまとめる。自動改行あり。
- nowrap：連続する空白、タブ、改行を、１つの空白、タブ、改行にまとめる。自動改行なし。
- pre：連続する空白、タブ、改行を、そのまま表示。自動改行なし。
- inherit：親要素の設定を継承。
サンプル
サンプルのwhite-spaceプロパティの値：
Sample Element Sample Element
サンプル 要素 サンプル 要素
サンプルの動作について
各ボタンをクリックすると、ボタン名のテキストを、サンプル要素の「white-spaceプロパティ」の値に設定する。設定値を「サンプルのwhite-spaceプロパティの値：」の右横に表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setWhiteSpace( $whiteSpace ) {
var $element = document.getElementById( "sample" );
$element.style.whiteSpace = $whiteSpace;
var $whiteSpace = $element.style.whiteSpace;
document.getElementById( "sampleOutput" ).innerHTML = $whiteSpace;
}
</script>
function setWhiteSpace( $whiteSpace ) {
var $element = document.getElementById( "sample" );
$element.style.whiteSpace = $whiteSpace;
var $whiteSpace = $element.style.whiteSpace;
document.getElementById( "sampleOutput" ).innerHTML = $whiteSpace;
}
</script>
HTML
<button onclick="setWhiteSpace('normal');">normal</button>
<button onclick="setWhiteSpace('nowrap');">nowrap</button>
<button onclick="setWhiteSpace('pre');">pre</button>
<button onclick="setWhiteSpace('inherit');">inherit</button>
<br />
<p>サンプルのwhite-spaceプロパティの値：<span id="sampleOutput"></span></p>
<p id="sample" style="font-size: 16px; width: 200px; border: 1px solid red; background-color: yellow;">
Sample Element Sample Element
<br />
サンプル 要素 サンプル 要素
</p>
<button onclick="setWhiteSpace('nowrap');">nowrap</button>
<button onclick="setWhiteSpace('pre');">pre</button>
<button onclick="setWhiteSpace('inherit');">inherit</button>
<br />
<p>サンプルのwhite-spaceプロパティの値：<span id="sampleOutput"></span></p>
<p id="sample" style="font-size: 16px; width: 200px; border: 1px solid red; background-color: yellow;">
Sample Element Sample Element
<br />
サンプル 要素 サンプル 要素
</p>