cssプロパティwhite-spaceの説明

こんにちは tanaka です。

今回は、
cssプロパティ
white-space の説明です。

white-spaceは、

1:コードに書いた
  タブ、半角スペース、改行を
  どのように表示させるかを決める。

2:右側の折り返しを
  ありにするか
  なしにするか
  を決める。

この2種類を同時に決める
プロパティです。


通常
コード側でエンターキーを押し
文章を改行しても

表示側では、
文章は改行されません。

そして、
コード側で半角スペースを
連続でたくさん入力しても

実際に表示される半角スペースは1つです。

それらを、
コントロールするのが
プロパティwhite-spaceです。

さらに、
右側の折り返しを
どのようにするか決めることも
同時に行えます。

それでは、
詳しく説明していきます。

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

white-spaceの説明

white-spaceとは

空白、タブ、改行の
ホワイトスペース処理と
右側の折り返しを

同時に決めることができる
プロパティです。

ホワイトスペースとは、

タブ、改行、頁送り、復帰、空白が
コード内で書かれた時

コード内に書かれた
タブ、改行、頁送り、復帰、空白を
そのまま表示せず、
半角スペース1個に変換して表示する処理のこと。

さらに
タブ、改行、頁送り、復帰、空白が
連続でたくさん入力された場合

それらを連続してたくさん表示したりはせず、
半角スペース1個に変換してから表示する。

white-spaceの値は、5つ

値は5つあります。

(有、無は、ホワイトスペース処理のこと)
1:white-space: normal  = 有
2:white-space: nowrap  = 有、折り返しされない
3:white-space: pre    = 無、折り返しされない
4:white-space: pre-wrap = 無
5:white-space: pre-line  = 有(改行だけなし)

ホワイトスペース処理がある場合、
空白、タブ、改行は
半角スペース1個に変換されます。

white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
1:white-space: normal

normalは、
通常の状態です。


ホワイトスペース処理は行われます。

右側の折り返しも行われます。


空白     = 1個にまとめられる
タブ     = 1個にまとめられる
改行     = コード内のエンターキー改行(無効)
自動折り返し = あり

画像blog-white-space01
画像blog-white-space02
white-space: normal;
2:white-space: nowrap

nowrapは、
normalの状態と、ほぼ同じです。

違う点は、
折り返しがされないという所です。


ホワイトスペース処理は行われます。

右側の折り返しは行われない。


空白     = 1個にまとめられる
タブ     = 1個にまとめられる
改行     = コード内のエンターキー改行(無効)
自動折り返し = なし

画像blog-white-space01
画像blog-white-space07
white-space: nowrap;
3:white-space: pre

preは、
ホワイトスペース処理も
右側の折り返しもされません。


ホワイトスペース処理は行われません。

右側の折り返しも行われない。


空白     = コードそのままを表示
タブ     = コードそのままを表示
改行     = コード内のエンターキー改行(有効)
自動折り返し = なし

画像blog-white-space01
画像blog-white-space04
white-space: pre;
4:white-space: pre-wrap

pre-wrapは、
ホワイトスペース処理は行われませんが
右側の折り返しは行われます。


ホワイトスペース処理は行われません。

右側の折り返しは行われる。


空白     = コードそのままを表示
タブ     = コードそのままを表示
改行     = コード内のエンターキー改行(有効)
自動折り返し = あり

画像blog-white-space01
画像blog-white-space05
white-space: pre-wrap;
5:white-space: pre-line

pre-lineは、
空白、タブの
ホワイトスペース処理は行われますが、

改行の
ホワイトスペース処理は行われません。

右側の折り返しは行われる。


難しく聞こえますが、
ほぼnormalと同じです。

違う点は、
コード内でエンターキーを押して改行した文章が
そのまま表示される所です。


ホワイトスペース処理は、改行だけ行われない。

右側の折り返しは行われる。


空白     = 1個にまとめられる
タブ     = 1個にまとめられる
改行     = コード内のエンターキー改行(有効)
自動折り返し = あり

画像blog-white-space01
画像blog-white-space06
white-space: pre-line;

まとめ

white-spaceとは

white-spaceとは、

空白、タブ、改行の
ホワイトスペース処理と
右側の折り返しを

同時に決めることができる
プロパティ。

ホワイトスペースとは、

タブ、改行、頁送り、復帰、空白が
コード内で書かれた時

コード内に書かれた
タブ、改行、頁送り、復帰、空白を
そのまま表示せず、
半角スペース1個に変換して表示する処理のこと。

さらに
タブ、改行、頁送り、復帰、空白が
連続でたくさん入力された場合

それらを連続してたくさん表示したりはせず、
半角スペース1個に変換してから表示する。

white-spaceの値は、5つ

値は5つあります。

(有、無は、ホワイトスペースの処理)
1:white-space: normal  = 有
2:white-space: nowrap  = 有、折り返しされない
3:white-space: pre    = 無、折り返しされない
4:white-space: pre-wrap = 無
5:white-space: pre-line  = 有(改行だけなし)

ホワイトスペースの処理がある場合、
空白、タブ、改行は
半角スペース1個に変換されます。

white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;

以上、
white-space
の話でした。

ありがとうございました。

タイトルとURLをコピーしました