【css】white-spaceの使い方

white-spaceの意味を理解すると、htmlコードの仕組みが分かります。

もうね、楽しいんです。

初心者から片足抜け出してる人なら分かってもらえるかも…

white-space

プロパティであるwhite-spaceには、おもに以下の値があります。

プロパティ・値

• normal(初期値)
• nowrap
• pre
• prewrap
• preline

white-spaceでできることは、

• テキストを折り返すか
• 連続の半角スペースや改行をどう表示させるか

の2つです。

先にわかりやすい、「テキストを折り返すか」について見ていきましょう。

テキストの折り返し

テキストを折り返す

例えば、以下のようなコードの場合。

<p>
　ほぼほぼ、ほぼほぼ、ほぼほぼ
</p>

p {
  width: 100px;
  border: solid 1px #000;
  white-space: normal;
}

テキストが折り返されますね。

ちなみにnormalは初期値なので、white-spaceを指定しなかった時もこの値が適用されます。

こういうことですね↓

<p>
　ほぼほぼ、ほぼほぼ、ほぼほぼ
</p>

p {
  width: 100px;
  border: solid 1px #000;
  white-space: normal;
}

【参考記事】初期値の使い所を理解する

みなさんが今デザインしてるサイトも、white-spaceを指定せずともテキストは折り返されていると思います。

その背景には、white-spaceに初期値normalが適用されているからです。

テキストを折り返さない

今度はさっきの表のうち、折り返さない値であるnowrapを指定してみましょう。

<p>
　ほぼほぼ、ほぼほぼ、ほぼほぼ
</p>

p {
  width: 100px;
  border: solid 1px #000;
  white-space: nowrap;
}

テキストは折り返されず、<p>の枠線からはみ出しましたね。

はみ出たテキスト隠す

じゃあ、余談ですがはみ出たテキストを隠しましょう。

<p>
　ほぼほぼ、ほぼほぼ、ほぼほぼ
</p>

p {
  width: 100px;
  border: solid 1px #000;
  white-space: nowrap;
  overflow: hidden;
}

overflow: hiddenでできますね。

hiddenは日本語で「隠された」という意味です。

まんまですね。

テキストの折り返しは分かっていただけたでしょうか？

連続の半角スペースや改行をどう表示させるか

連続で入力した半角スペース・改行をどう表示させるかは見てもらったほうがいいですね。

半角スペース

まず、半角スペースから。

初期値normalを指定。

p {
  width: 100px;
  border: solid 1px #000;
  white-space: normal;
}

htmlコードでは3つの半角スペースを入れましたが、ブラウザでは半角スペース1つだけが表示。

これが、上の表の1つにまとめるという意味です。

次は、連続して入力したスペースを1つにまとめず、そのまま表示させるprewrapを指定しましょう。

p {
  width: 100px;
  border: solid 1px #000;
  white-space: prewrap;
}

半角スペース3つぶんがそのまま表示されました。

改行

今度は改行してみます。

normalだと、改行も半角スペースにまとめられてしまいます。

p {
  width: 100px;
  border: solid 1px #000;
  white-space: normal;
}

htmlでは改行を2つ続けましたが、ブラウザでは半角スペース1つにまとめられてしまいました。

もし、normalで改行をさせたいなら<br>を使いましょう↓

<p>ほぼほぼ<br>
<br>
ほぼほぼほぼほぼ
</p>

次は、改行をそのまま表示させるprewrapを指定します。

p {
  width: 100px;
  border: solid 1px #000;
  white-space: prewrap;
}

white-space: prewrapを指定すると、改行が反映されていますね。

white-spaceを指定する場面

white-spaceは、擬似要素のbeforeやafterのテキストの中身を改行する時に使います。

<p>ほぼほぼ</p>

p::after {
  content: '4コいち\Aジャスト';
  white-space: pre;
}

\Aは改行を表すコードです。

white-space: preは改行をそのまま実行します。

ですので、上記の結果のとおり、「4コいち」の次で改行されています。

もし、white-space: preを指定しないと、下図のようになります。

<p>ほぼほぼ</p>

p::after {
  content: '4コいち\Aジャスト';
}

改行はされず、半角スペースに置き換わりました。

上記コードはwhite-spaceが未指定なため、初期値normalが採用されています。

上記のとおり、normalは改行を半角スペースに置き換えていました。

なので、改行コードの\Aが半角スペースになったのです。

参考サイト

この「white-space」は、CSS3をもとに書きました。

CSS3とは、cssのルールブックみたいなもので、その最新版です。

• white-space｜MDN Web Docs
• 3. White Space and Wrapping: the white-space property｜CSS Text Module Level 3

お時間ある時に、ご覧ください。

まとめ

テキストエディタ上で何気に使っている半角スペース・改行が、white-spceでコントロールされてると思うと面白いですよね。

というわけで、今回は以上になります。