Style whiteSpaceプロパティ
Style オブジェクト
定義と使い方
whiteSpace プロパティは、テキスト内のタブ、改行、スペースの処理方法を設定または返します。
構文
whiteSpace プロパティの設定：
Object.style.whiteSpace="normal|nowrap|pre|inherit"
whiteSpace プロパティの取得：
Object.style.whiteSpace
| 值 | 説明 |
|---|---|
| normal | デフォルト。空白と改行を自動的に無視します。 |
| nowrap | 空白は無視しますが、改行は許可しません。 |
| pre | 改行やその他の空白文字は保持されます。 |
| inherit | whiteSpace プロパティの値は親要素から継承されます。 |
ブラウザサポート
すべての主要ブラウザが whiteSpace プロパティをサポートしています。
注意：IE7 以前のバージョンは "inherit" 値をサポートしていません。IE8 は !DOCTYPE が指定されている場合のみ "inherit" をサポートします。IE9 は "inherit" をサポートしています。
例
例
テキスト内の改行と空白を保持：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル(example.com)</title>
<script>
function displayResult(){
document.getElementById("div1").style.whiteSpace="pre";
}
</script>
</head>
<body>
<div id="div1">
こ れは テキスト、これ は テ キ ス ト。こ れ
テ キスト、こ れはテキ ス ト 、 こ れ は テキスト。
</div>
<br>
<button type="button" onclick="displayResult()">改行と空白を保持</button>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル(example.com)</title>
<script>
function displayResult(){
document.getElementById("div1").style.whiteSpace="pre";
}
</script>
</head>
<body>
<div id="div1">
こ れは テキスト、これ は テ キ ス ト。こ れ
テ キスト、こ れはテキ ス ト 、 こ れ は テキスト。
</div>
<br>
<button type="button" onclick="displayResult()">改行と空白を保持</button>
</body>
</html>
試してみる »
Style オブジェクト その他の拡張