white-space
テキストの半角スペース、タブ文字、改行の表示方法を指定します。
サンプルコード
style.css
/* normal: 連続スペースは1つに、必要に応じて改行(初期値) */
p.test { white-space: normal;}
/* pre: スペース・タブ・改行をそのまま表示(ソースコード表示向け) */
p.test2 { white-space: pre;}
/* nowrap: 改行しない(テキストが1行で伸び続ける) */
p.test3 { white-space: nowrap;}
/* pre-wrap: スペース・改行を保持しつつ、ボックス端で折り返す */
p.test4 { white-space: pre-wrap;}
/* pre-line: 連続スペースは1つに、改行は保持 */
p.test5 { white-space: pre-line;}
/* テキストを1行に収めてはみ出た分を省略する定番パターン */
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
/* チャット・コメント欄での改行保持 */
.comment { white-space: pre-wrap; word-break: break-word;}
指定可能な値一覧
| 値 | 概要 |
|---|---|
| normal | テキストの連続している半角スペース、タブ文字、改行をひとつの半角スペースとして表示します。この値が指定されている場合は包含されている要素の大きさに合わせて自動でテキストが改行されます。この『normal』が初期値です。 |
| pre | テキストの半角スペース、タブ文字、改行をそのまま表示します。 |
| nowrap | テキストの連続している半角スペース、タブ文字、改行をひとつの半角スペースとして表示します。この値が指定されている場合のテキストは自動で改行されません。 |
ブラウザでの表示結果
これらのサンプルは以下の文字列を記述しています。
ここはp要素です。 テキスト。テキスト。 テキスト。テキスト。テキスト。
<p style="border: solid 1px; white-space: normal; width: 200px;">ここはp要素です。 テキスト。テキスト。 テキスト。テキスト。テキスト。</p>
<p style="border: solid 1px; white-space: pre; width: 200px;">ここはp要素です。 テキスト。テキスト。 テキスト。テキスト。テキスト。</p>
<p style="border: solid 1px; white-space: nowrap; width: 200px;">ここはp要素です。 テキスト。テキスト。 テキスト。テキスト。テキスト。</p>
対応ブラウザ
デスクトップ
8 ○
7 ○
6 ○
3 以前 ×モバイル
Android Browser
4.4 以降 ○
3 以前 ×デスクトップ版と同等の対応です
デスクトップ版と同等の対応です
※ バージョン情報は MDN に基づいています。
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。