MENU

テキストエリアの改行をCSSのみで反映!white-space: pre-wrap

タイトルが全てなのですが、
改行を反映させたい要素に

white-space: pre-wrap;

を指定すると、
WordPressのカスタムフィールドなど、CMSのテキストエリア内で入力した改行がコンテンツに反映されます。

文字
文字
文字

WordPressの場合は、プラグインのAdvanced Custom Fieldsを入れれば改行を<br>タグで出力する等の設定も可能ですが、独自のCMSとかで容易にシステム変更が出来ない時など、CSSのプロパティ一つ追加するだけで爆速対応できます。

white-space: pre;でも同じように改行できますが、そちらは要素内の折り返しが無効化されます。ケースバイケースで。

よかったらシェアしてください!
もくじ
閉じる