今回は【CSS】white-spaceを解説! スペース・タブ・改行の表示方法
についての解説になります!
こんな方に読んでほしい
- CSSを学び始めた方へ
-
white-space
(ホワイトスペース)の使い方について学びたい方へ - normal、nowrap、pre-line、pre、pre-wrap5つの指定を学ぼう!
white-space
プロパティは、要素内の半角スペース、タブ(tab)、改行をどのように表示するかを
指定するプロパティになります。
white-spaceについて
white-spaceとは、要素内の半角スペース、タブ(tab)、改行の表示を指定します。
書き方は以下のようになります。
/*--white-space--*/
要素 {white-space: 値;}
- 指定できる値
- normal(初期値)
連続する半角スペース・タブなど空白文字が続くとき、半角スペース1文字分のスペースが空きます。
- nowrap 「基本的にnormalと同じ」
連続する半角スペース・タブなど空白文字は1文字分のスペースだけ空きます。
- pre-line 「基本的にnormalと同じ」
連続する半角スペース・タブなど空白文字は1文字分のスペースだけ空きます。
- pre
連続する半角スペース・タブなどはそのまま表示します。
- pre-wrap 「基本的にpreと同じ」
連続する半角スペース・タブなどはそのまま表示します。
normalについて
white-space:normal
とは、以下にまとめられます。
連続する半角スペース、タブ(tab)を1つにまとめられる
改行を1つの半角スペースとして表示します
要素幅で自動的に折返しされる
normalについて
赤色の特徴は
・情熱
・強さ
・生命力
・活動
・祝福 ・派手などあります。
<p>赤色の特徴は
・情熱
・強さ
・生命力
・活動
・祝福 ・派手などあります。
</p>
p {
width: 200px;
background-color: #fd6158;
/*--normalを指定--*/
white-space: normal;
}
このように、normal
だと、改行、半角スペース、タブ(tab)は1つにまとめられる。
また、要素幅いっぱいまでくると行が自動で改行されます。
nowrapについて
white-space:nowrap
とは、以下にまとめられます。
連続する半角スペース、タブ(tab)を1つにまとめられる
改行を1つの半角スペースとして表示します
要素幅で自動的に折返しされません、br
を使わない限り、行は折り返されません。
nowrapについて
赤色の特徴は
・情熱
・強さ
・生命力
・活動
・祝福 ・派手などあります。
<p>赤色の特徴は
・情熱
・強さ
・生命力
・活動
・祝福 ・派手などあります。
</p>
p {
width: 200px;
background-color: #fd6158;
/*--nowrapを指定--*/
white-space: nowrap;
}
このように、nowrap
だと、要素幅で折返しされず、はみ出してしまいます。
またbrタグを使わない限り、改行はされません。
はみ出し部分について
はみ出し部分はovreflow
プロパティを指定する事で、はみ出した部分を非表示、スクロールの指定が
可能になります。
ovreflowの記事
overflow:hidden、scrollの違い、使い方についての記事になります。
pre-lineについて
white-space:pre-line
とは、以下にまとめられます。
連続する半角スペース、タブ(tab)を1つにまとめられる
改行はそのまま表示されます
要素幅で自動的に折返しされる
pre-lineについて
赤色の特徴は
・情熱
・強さ
・生命力
・活動
・祝福 ・派手などあります。
<p>
赤色の特徴は
・情熱
・強さ
・生命力
・活動
・祝福 ・派手などあります。
</p>
p {
width: 200px;
background-color: #fd6158;
/*--pre-lineを指定--*/
white-space: pre-line;
}
このように、pre-line
だと、改行がブラウザ上で実際に表示され、複数の改行を入れた場合は、
その分だけ改行されます。
preについて
white-space:pre
とは、以下にまとめられます。
連続する半角スペース、タブ(tab)をそのまま表示します
改行はそのまま表示されます
要素幅で自動的に折返しされません
preについて
赤色の特徴は
・情熱
・強さ
・生命力
・活動
・祝福 ・派手などあります。
<p>
赤色の特徴は
・情熱
・強さ
・生命力
・活動
・祝福 ・派手などあります。
</p>
p {
width: 200px;
background-color: #fd6158;
/*--preを指定--*/
white-space: pre;
}
このように、pre
だと、改行、半角スペース、タブ(tab)はそのまま反映されます。
要素幅で折返しされず、はみ出してしまいます。brタグを使わない限り、改行はされません。
pre-wrapについて
white-space:pre-wrap
とは、以下にまとめられます。
連続する半角スペース、タブ(tab)をそのまま表示します
改行はそのまま表示されます
要素幅で自動的に折返しされる
pre-wrapについて
赤色の特徴は
・情熱
・強さ
・生命力
・活動
・祝福 ・派手などあります。
<p>
赤色の特徴は
・情熱
・強さ
・生命力
・活動
・祝福 ・派手などあります。
</p>
p {
width: 200px;
background-color: #fd6158;
/*--pre-lineを指定--*/
white-space: pre-line;
}
このように、pre-wrap
だと、半角スペース、タブ(tab)はそのまま反映されます。
要素幅いっぱいまでくると行が自動で改行されます。
まとめ
今回はこれで以上です。
- POINT
-
white-space
とは、要素内の半角スペース、タブ(tab)、改行の表示を指定します。 - はみ出し部分は
ovreflow
プロパティを指定する事で、はみ出した部分を非表示、スクロールの指定が可能になります。
スポンサーリンク
SHU
1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。
最新記事
関連記事