white-spaceの属性を理解して横スクロールと改行を制御する

通常、Webのテキストは横幅いっぱいまで来ると折り返されて表示されます。このとき、折り返し条件に関わる属性がwhite-spaceです。

行が溢れたり横スクロールを起こす条件を制御するために知っておきたいwhite-space属性の挙動について、自分なりの備忘録をまとめてみました。

ついでに、改行したくないテキストデータを表示するときに「横幅が溢れたら横スクロールするボックス」も作ったので併せてどうぞ。

あえて横スクロールするテキストボックス

メインカラムより長いテキストが入ったときに、わざと横スクロールするボックスです。

デモ

サンプルその1。

行幅がカラム幅未満の時は普通に表示されます。

サンプルその２。
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> 要素のあるときか、行ボックスを埋めるのに必要なときに行われます。

white-space – CSS | MDN

みどころとなる要素は「自動折り返し」「連続スペースの処理」「改行」の3つですね。

white-spaceのプロパティ

	改行	空白とタブ	テキストの折り返し
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&nbsp;&nbsp;&nbsp;test&nbsp;&nbsp;&nbsp;
test&nbsp;&nbsp;&nbsp;test&nbsp;&nbsp;&nbsp;
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タグが自動挿入されたりいろいろです。この結果を参考に適切な設定を振り分けてみて下さい。

(；・`д・´)｛正直なところ、細かいことは気にしないのが一番だと思うのですが難しいですね！