【CSS】改行・スペース・タブの出力形式を指定する方法｜エスケープ後などに
PHPなどで、文章内のHTMLタグをエスケープして出力すると、タグが利用できないため、ブラウザで表示した際に文章が詰まった状態で出力され、文章が読みずらくなります。
そのような場合に、CSSのwhite-spaceプロパティを利用し、要素内の改行などを有効にする方法があります。
今回はそのCSSのwhite-spaceプロパティの利用方法・利用例となります。
【CSS】改行・スペース・タブの出力形式を指定する例
CSSのwhite-spaceプロパティでは、指定した要素内にある「改行」と「ホワイトスペース（半角スペース・タブ）」の出力形式を指定できます。
white-spaceプロパティの種類
white-spaceプロパティで指定できる出力形式は、以下の５種類となります。
white-space: normal;（初期値）
- 要素のwidthに合わせて自動改行
- 改行を1つの半角スペースとして表示
- ホワイトスペースを無視
white-space: pre-wrap;
- 要素のwidthに合わせて自動改行
- 改行をそのまま表示
- ホワイトスペースをそのまま表示
white-space: pre-line;
- 要素のwidthに合わせて自動改行
- 改行をそのまま表示
- ホワイトスペースを無視
white-space: pre;
- 要素のwidthに合わせた自動改行なし
- 改行をそのまま表示
- ホワイトスペースをそのまま表示
white-space: nowrap;
- 要素のwidthに合わせた自動改行なし
- 改行を1つの半角スペースとして表示
- ホワイトスペースを無視
white-spaceプロパティの利用例
以下、white-spaceプロパティの利用例となります。
See the Pen KEWmNp by yic666kr (@yic666kr) on CodePen.