【CSS】改行・スペース・タブの出力形式を指定する方法|エスケープ後などに

PHPなどで、文章内のHTMLタグをエスケープして出力すると、タグが利用できないため、ブラウザで表示した際に文章が詰まった状態で出力され、文章が読みずらくなります。

そのような場合に、CSSのwhite-spaceプロパティを利用し、要素内の改行などを有効にする方法があります。

今回はそのCSSのwhite-spaceプロパティの利用方法・利用例となります。

【CSS】改行・スペース・タブの出力形式を指定する例

CSSのwhite-spaceプロパティでは、指定した要素内にある「改行」と「ホワイトスペース(半角スペース・タブ)」の出力形式を指定できます。

white-spaceプロパティの種類

white-spaceプロパティで指定できる出力形式は、以下の5種類となります。

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.

参考サイト、参考書籍

コメント投稿またはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。
Twitterで返信する場合はコチラから。