最近、CSSのフレームワークであるBootstrapを勉強している。

勉強している時に、Google Chromeの検証ツールで

「どのようにCSSで指定されてるのか?」

を確認していると

white-space:nowrap

というCSSの指定をよく見るが、意味がぜんぜんわからなかった(笑)。

「CSSのwhite-spaceプロパティは余白や改行などをどう扱うかを指定するもの」

というのは前回記事で理解したが、何も指定されていない時に適用されるwhite-space:normalとwhite-space:nowrapがどう違うかを今回は調べてみた。

スポンサーリンク

nowrapの意味は?

white-spaceは日本語に訳すと「余白」「空白」という意味。

CSSでのwhite-spaceプロパティの定義は

「HTMLに書いた半角スペース、タブ、改行をブラウザでどのように表示させるかを指定するプロパティ」

という意味で非常にわかりにくいが(笑)、半角スペースや改行などの扱いを取り決めているのだ。

wrapはテキストの折り返しなどでよく使われるので、意味としては「改行」に近い。

wrapの意味が「改行」と捉えるとnowrapはわかりやすいはずだ。

  • no=しない
  • wrap=改行

ということだがら

nowrap=改行しない

という意味になる。

white-space:normalが適用された場合

nowrapの何となくの意味がわかったところで、whte-space:normalとの違いを詳しく確認しておこう。

まずはwhite-space:normalの場合だ。

前回の【CSS】white-space:normalってどういう意味?で書いたように初期値(何もCSSで指定しない場合)で適用されるwhite-space:normalでは

  • 改行は半角スペース1つにまとめられる
  • 連続した半角スペースも1つの半角スペースにまとめられる
  • プラウザの画面幅や指定したwidthの幅を超える場合は自動的に改行される

という特徴がある。

例えば、下記のようなコードを書いた場合

実際のコードに入力されている半角スペースや改行は下図の通りだ。

サンプルコード

これを実際にプラウザに表示すると下図のようになる

white-space:normalの説明

このようにwhite-space:normalが適用されると

  • 連続した半角スペースは1つの半角スペースにまとめられる
  • 改行していた部分は1つの半角スペースにまとめられる
  • 端(widthで指定した幅)まで来ると自動で改行される

となり、Chromeなどのプラウザで表示される場合は上記のように変更されるのだ。

white-space:nowrapが適用された場合

それに対して同じサンプルコードでwhite-space:normal→nowrapだけ変更した場合。

Chromeなどでの表示は下図のようになる。

white-space:nowrapの説明

white-space:normalとの違いは

「端まできても自動的に改行されない!」

この1点だ!

「自動的に改行されるかどうか?」

これがnormalの場合は自動改行されて、nowrapの場合は自動改行されない。

それ以外はwhite-space:normalと全く同じ特徴なのだ。

スポンサーリンク
おすすめの記事