通常、Webのテキストは横幅いっぱいまで来ると折り返されて表示されます。このとき、折り返し条件に関わる属性がwhite-spaceです。
行が溢れたり横スクロールを起こす条件を制御するために知っておきたいwhite-space属性の挙動について、自分なりの備忘録をまとめてみました。
ついでに、改行したくないテキストデータを表示するときに「横幅が溢れたら横スクロールするボックス」も作ったので併せてどうぞ。
あえて横スクロールするテキストボックス
メインカラムより長いテキストが入ったときに、わざと横スクロールするボックスです。
デモ
サンプルその1。
行幅がカラム幅未満の時は普通に表示されます。
サンプルその2。
1行がとても長い例。例えばこんな感じに長いテキストを打ち込むと横スクロールすると思います。スマートフォンなんかで見るとものすごくうざいことになりそう。でへ。
次に、長いテキストを打ち込んだ例です。横スクロールバーが出ていると思います。どちらも適用しているスタイルは同じものです。横幅が溢れたときだけ横スクロールします。
AAとか、ポエムとか、勝手に改行されたくないデータを表示するときに便利です。
HTML
【HTML】
<p class="demo">
text text text text text text text text text text text text
</p>
外枠となるボックスにクラスをつけるだけです。この例ではPタグで囲ってますが、状況に応じてDIVなどに振り替えて下さい。
CSS
【CSS】
.demo {
padding: 1em;
overflow: auto;
white-space: pre;
border: 5px solid #de8a9d;
border-radius: 5px;
background-color: #fdf1f3;
}
white-space属性の指定と、行が溢れたときの指定がメインです。後の指定は見た目を整えてるだけですが、思いのほか使い勝手の良い子です。
white-spaceの仕様
そんなわけで、テキストの折り返し属性や横スクロールと上手に付き合うためのwhite-space属性です。折り返し設定に関するカスタマイズでハマったときはwhite-space属性の違い知る必要があるでしょう。
MDNからwhite-spaceの仕様を抜き出して一覧表にしてみました。
- normal
- 連続する空白は詰められて 1 つになります。ソース内の改行文字も空白文字として扱われます。行ボックスを埋めるために、必要なら行を折り返します。
- nowrap
- normal と同じく空白を詰めますが、行の折り返しは行いません。
- pre
- 連続する空白はそのまま残され、行の折り返しは、ソース内の改行文字と、 <br> 要素でのみ行います。
- pre-wrap
- 連続する空白はそのまま残されます。行の折り返しは、改行文字や <br> 要素のあるときか、行ボックスを埋めるのに必要なときに行います。
- pre-line
- 連続する空白は詰められて 1 つになります。行の折り返しは、改行文字や <br> 要素のあるときか、行ボックスを埋めるのに必要なときに行われます。
みどころとなる要素は「自動折り返し」「連続スペースの処理」「改行」の3つですね。
改行 | 空白とタブ | テキストの折り返し | |
---|---|---|---|
normal | 詰める | 詰める | 折り返す |
nowrap | 詰める | 詰める | 折り返さない |
pre | 残す | 残す | 折り返さない |
pre-wrap | 残す | 残す | 折り返す |
pre-line | 残す | 詰める | 折り返す |
white-spaceを比較するためのサンプルコード
実際のケーススタディとしてこちらもデモを作ってみます。
HTML
【HTML】
<p>
example example example example example
test test test test test
test test test test test
sample sample sample sample sample
</p>
上のようなテキストを用意して、Pタグに設定したwhite-spaceの挙動を見てみます。ちなみに上のHTMLはレンダリング後の姿で、実際は以下のようなコードでチェックしてます。
【生HTML】
example example example <br />
test test
test test
sample sample sample sample sample sample
CSS
【CSS】
p {
width:240px;
border:dotted 1px;
white-space: ***** ;
}
white-space属性ごとの違い
以下、具体的に折り返し条件についてみていきます。「改行」「空白とタブ」「テキストの折り返し」に注意してみてください。
white-space: normal; のとき
example example example example example
test test test test test
test test test test test
sample sample sample sample sample
初期設定です。単語の途中でも強制的に折り返しますね。半角スペースが詰まりました。
white-space: pre; のとき
example example example example example
test test test test test
test test test test test
sample sample sample sample sample
外枠にかかわらず折り返しません。半角スペースそのまま。変な改行が入ります。
white-space: nowrap; のとき
example example example example example
test test test test test
test test test test test
sample sample sample sample sample
外枠にかかわらず折り返しません。半角スペース詰まります。改行は見たまま。
white-space: pre-wrap; のとき
example example example example example
test test test test test
test test test test test
sample sample sample sample sample
折り返して変な改行が入ります。半角スペースそのまま。
white-space: pre-line; のとき
example example example example example
test test test test test
test test test test test
sample sample sample sample sample
折り返して変な改行が入ります。前項「pre-wrap」との違いが微妙ですけど、半角スペースが詰まっております。
まとめ
改行に関する設定はCMSごとにPタグが自動挿入されたりいろいろです。この結果を参考に適切な設定を振り分けてみて下さい。
(;・`д・´){正直なところ、細かいことは気にしないのが一番だと思うのですが難しいですね!
【 更新履歴等 】
2014/03/17 初稿発表
2016/02/09 white-spaceのコード説明をそれぞれ足しました
旧題:横スクロールするDIVの調整はwhite-space属性がキモ
コメントをどうぞ(´ω`*)