ウェブランサー

white-space - ソースコードの空白文字(半角スペース・タブ・改行)をどのように扱うか指定する

取り扱い 標準
適用可能 全要素
継承 する
対応ブラウザ white-spaceの対応状況を確認する

white-spaceプロパティの説明

white-spaceは、ソースコード内に書かれた、半角スペースやタブ、改行などの空白文字をどのように扱うか指定する際に使用します。例えば、連続する空白を詰めて表示するか、そのまま残して表示するか決める。また、一行のテキストが要素の端まで到達した場合に、自動的に折り返すか、それとも<br>で改行するまで折り返さないかを定義することができます。

white-spaceに与えられる値

white-space: normal;
連続する半角スペース・タブ・改行を、1つの半角スペースとして表示します。ボックスの大きさが指定されている場合には、その大きさに応じて自動的改行されます。
white-space: nowrap;
連続する半角スペース・タブ・改行を、1つの半角スペースとして表示します。ボックスの大きさが指定されている場合には、自動的改行されません。
white-space: pre;
連続する半角スペース・タブ・改行を、そのままの状態で表示します。ボックスの端まで行っても自動改行されません。
white-space: pre-wrap;
preと同様に、連続する半角スペース・タブ・改行を、そのまま表示します。ただし、ボックスの端まで行くと自動的に改行します。
white-space: pre-line;
normalと同様ですが、ソースコードを改行した位置でも改行として表示されます。

white-spaceの使用サンプル

CSS
.ws_normal {
 white-space: normal;
 width: 200px;
 padding: 5px;
 margin: 0 0 10px 0;
 border: 1px solid #666666;
}
.ws_nowrap {
 white-space: nowrap;
 width: 200px;
 padding: 5px;
 margin: 0 0 10px 0;
 border: 1px solid #666666;
}
.ws_pre {
 white-space: pre;
 width: 200px;
 padding: 5px;
 margin: 0 0 10px 0;
 border: 1px solid #666666;
}
.ws_prewrap {
 white-space: pre-wrap;
 width: 200px;
 padding: 5px;
 margin: 0 0 10px 0;
 border: 1px solid #666666;
}
.ws_preline {
 white-space: pre-line;
 width: 200px;
 padding: 5px;
 margin: 0 0 10px 0;
 border: 1px solid #666666;
}
XHTML
<div class="ws_normal">.ws_normal
white-space: normal;<br>
text text text text text text text text text text<br>
text text text text text text text text text text<br>
Space      Space      Space      Space      Space<br>
TestTexT
TestTexT
TestTexT
</div>

<div class="ws_nowrap">.ws_nowrap
white-space: nowrap;<br>
text text text text text text text text text text<br>
text text text text text text text text text text<br>
Space      Space      Space      Space      Space<br>
TestTexT
TestTexT
TestTexT
</div>

<div class="ws_pre">.ws_pre
white-space: pre;<br>
text text text text text text text text text text<br>
text text text text text text text text text text<br>
Space      Space      Space      Space      Space<br>
TestTexT
TestTexT
TestTexT
</div>

<div class="ws_prewrap">.ws_prewrap
white-space: pre-wrap;<br>
text text text text text text text text text text<br>
text text text text text text text text text text<br>
Space      Space      Space      Space      Space<br>
TestTexT
TestTexT
TestTexT
</div>

<div class="ws_preline">.ws_preline
white-space: pre-line;<br>
text text text text text text text text text text<br>
text text text text text text text text text text<br>
Space      Space      Space      Space      Space<br>
TestTexT
TestTexT
TestTexT
</div>
表示確認
.ws_normal white-space: normal;
text text text text text text text text text text
text text text text text text text text text text
Space Space Space Space Space
TestTexT TestTexT TestTexT
.ws_nowrap white-space: nowrap;
text text text text text text text text text text
text text text text text text text text text text
Space Space Space Space Space
TestTexT TestTexT TestTexT
.ws_pre white-space: pre;
text text text text text text text text text text
text text text text text text text text text text
Space Space Space Space Space
TestTexT TestTexT TestTexT
.ws_prewrap white-space: pre-wrap;
text text text text text text text text text text
text text text text text text text text text text
Space Space Space Space Space
TestTexT TestTexT TestTexT
.ws_preline text text text text text text text text text text
text text text text text text text text text text
Space Space Space Space Space
TestTexT TestTexT TestTexT

white-spaceに関連するCSSプロパティ

文字揃え・段落の振る舞い
baseline-shift 優先するベースラインを指定し直す
direction 文字表記の方向(左右)を指定する
drop-initial-after-adjust 頭文字の第一接続点の揃え位置を指定する
drop-initial-after-align 頭文字の第一接続点の揃えラインを指定する
drop-initial-before-adjust 頭文字の第二接続点の揃え位置を指定する
drop-initial-before-align 頭文字の第二接続点の揃えラインを指定する
drop-initial-size 頭文字のサイズを指定する
drop-initial-value 頭文字を何行分にするかを指定する
letter-spacing 文字の間隔を指定する
line-break 要素内での行末や行頭の禁則処理の厳密さを指定する
line-height 行の高さを指定する
line-stacking 行ボックスに関する指定をまとめて行う
line-stacking-ruby 行ボックスを重ねる際のルビの扱いを指定する
line-stacking-shift 文字のベースラインを考慮するかどうかを指定する
unicode-bidi 文字表記の方向(左右)を指定する
white-space テキスト内の空白、タブ、改行の表示の仕方を指定する
word-break 文章の改行の仕方について指定する
word-spacing 単語の間隔を指定する
word-wrap 単語の途中における改行処理の仕方を指定する
writing-mode 文字表記の方向(縦横)を指定する