プログラミング

white-spaceでスペース・タブ・改行の表示指定【CSS】

white-spaceはスペース・タブ・改行の表示方法を指定するプロパティです。

{white-space: 表示方法;}

white-spaceの指定方法

white-spaceプロパティでは以下のような値を指定できます。

  • normal
  • pre
  • nowrap
  • pre-wrap
  • pre-line

normal

normalは表示方法を指定しません。

pre

preを指定すると、スペース・タブ・改行はそのまま表示されます。

ウィンドウの端では自動で改行されません。

nowrap

nowrapを指定すると、スペース・タブ・改行は半角スペースとして表示されます。

ウィンドウの端では自動で改行されません。

pre-wrap

pre-wrapを指定すると、スペース・タブ・改行はそのまま表示されます。

また、ウィンドウの端で自動で改行されます。

pre-line

pre-lineを指定すると、改行はそのまま表示され、スペースとタブは半角スペースとして表示されます。

ウィンドウの端で自動改行されます。

それぞれの値を指定したときの違い

white-spaceプロパティでそれぞれの値を指定したときの違いを確認したいと思います。

normalを指定しています。normalを指定しています。normalを指定しています。
normalを指定しています。
preを指定しています。preを指定しています。preを指定しています。
preを指定しています。
nowrapを指定しています。nowrapを指定しています。nowrapを指定しています。
nowrapを指定しています。
pre-wrapを指定しています。pre-wrapを指定しています。pre-wrapを指定しています。
pre-wrapを指定しています。
pre-lineを指定しています。pre-lineを指定しています。pre-lineを指定しています。
pre-lineを指定しています。

どの枠の幅も300pxにしていて、preやnowrapを指定すると自動改行がされずに枠からはみ出ていたり、どのような違いがあるかわかると思います。

スマホで見ても、ウィンドウ幅からはみ出ています。

1 Comment

Leave a Comment