white-spaceを使用したテキストの設定
white-space

white-spaceを使用したテキストの設定

意図しないテキストの折り返しや空白によってホームページのレイアウトが崩れる場合があります。
CSSの“white-space”プロパティを使用することで、レイアウト崩れを防ぐことができます。

”white-space”プロパティについて

white-spaceプロパティは、要素内のテキストについて、自動改行するか複数の空白を一つの空白にするか、改行を空白にするかなど、改行やスペース、タブの扱いを指定します。

white-space: normal(初期値)

改行・空白テキストを詰めます。テキストは折り返します。

  • 改行
  • 詰め
  • 空白とタブ
  • 詰め
  • テキストの折り返し
  • 折り返す

white-space: nowrap

normalと同じく改行・空白テキストを詰めますが、テキストは折り返しません。

  • 改行
  • 詰め
  • 空白とタブ
  • 詰め
  • テキストの折り返し
  • 折り返さない

white-space: pre

改行・空白テキストは保持。テキストの折り返しは、改行と<br>要素のみになります。

  • 改行
  • 保持
  • 空白とタブ
  • 保持
  • テキストの折り返し
  • 折り返さない

white-space: pre-wrap

改行・空白テキストは保持。テキストの折り返しは、改行と<br>要素がある場合、要素を埋める場合にあります。

  • 改行
  • 保持
  • 空白とタブ
  • 保持
  • テキストの折り返し
  • 折り返す

white-space: pre-line

空白テキストは詰められます。テキストの折り返しは、改行と<br>要素がある場合、要素を埋める場合にあります。

  • 改行
  • 保持
  • 空白とタブ
  • 詰め
  • テキストの折り返し
  • 折り返す

例1)“white-space: normal”を使用する場合

HTMLソースを確認してみてください。“normal”は初期値ですので、追加しても変化はありません。左右どちらもテキストが折り返しされています。

See the Pen no white-space: nowrap by Freeway (@Freeway) on CodePen.

例2)“white-space: nowrap”を使用する場合

左に“white-space: nowrap”を追加しました。左のテキストが折り返ししていないことがわかります。

See the Pen white-space: nowrap by Freeway (@Freeway) on CodePen.