HTML では<br>タグを使って改行を行うと思いますが、white-spaceプロパティを使うことで<br>タグ無しでも css だけで改行を行うことができます。
（ブログ名と同じですが、特に由来になっている訳ではないです）
white-space プロパティ
white-spaceはス ペースや改行をどう扱うか設定するために使うプロパティです。
通常 HTML に改行やスペースを何個使っても、実際のウェブページでの表示は半角スペース1個分にまとめられてしまいますが、改行やスペースをそのまま反映することができます。
また、テキストが横幅いっぱいに到達すると自動的に改行が行われますが、自動改行するかどうかをコントロールできます。
white-space プロパティの改行/スペース/自動改行の反映表
| 改行 | スペース | 自動改行 | |
|---|---|---|---|
| pre | ○ | ○ | ✕ |
| nowrap | ○ | ✕ | ✕ |
| pre-line | ○ | ✕ | ○ |
| pre-wrap | ○ | ○ | ○ |
テキストが横幅をオーバーしてしまう場合、自動改行してくれない設定だと崩れてしまう可能性があるので注意が必要です。
例
preを使ってみます。自動改行は反映されません。
HTML
<div class="text">
この文章を
改行させいたい
それだけ
</div>CSS
.text {
white-space: pre;
}注意点
- エディタの自動整形をかけている際に、改行位置やスペースが整形されると表示側にも反映されてしまう
- HTML 内で改行している箇所が「コードを見やすくしてる為に改行しているのか」「white-spaceプロパティで反映するために改行しているのか」どちらかわかりにくくなる
このあたりはルールを決めて使い分けていくと良いでしょう。
