• Skip to main content
  • Skip to primary sidebar

ChNK.log

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

2018年4月10日 最終更新日:2020年5月8日 カテゴリー:CSS

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

white-space: pre-wrap;

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

文字
文字
文字

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

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

関連記事

  • Multiple backgroundsMultiple backgrounds
  • iPhone X 予約しましたiPhone X 予約しました
  • IntelliJ IDEAでタスクランナーのタスク一覧を表示、実行する方法IntelliJ IDEAでタスクランナーのタスク一覧を表示、実行する方法
  • CSSのみで改行!疑似要素のcontentで改行する方法CSSのみで改行!疑似要素のcontentで改行する方法
  • お名前.comのドメイン登録時にWhois情報公開代行設定を忘れたお名前.comのドメイン登録時にWhois情報公開代行設定を忘れた
  • Jekyllでブログ作成してみたJekyllでブログ作成してみた
  • SSH接続でPermission denied (publickey).SSH接続でPermission denied (publickey).
  • bitbucket登録してみたbitbucket登録してみた

共有:

  • Facebook
  • Twitter

カテゴリー:CSS




最初のサイドバー

プロフィール

茶木 健輔 / Kensuke Chanoki
Webデザイナー / フロントエンドエンジニア

1986年12月生まれ。鹿児島県出身。
福岡の会社のWeb担当から独立
現在は鹿児島で2児の父をしながら
在宅フリーランスをしています。

日々の生活で得た知見や、買った物、Webフロントエンドの事などを雑多に綴ります。
ガジェット好き。最近DTMも始めました。物欲が止まらない。

最近の投稿

  • Moonlander MARKⅠは持ち運びも出来る最強左右分離型キーボード
  • YAMAHAのネットワークレシーバーR-N803を購入した話
  • JetBrains ToolboxでインストールしたアプリがAlfredで表示されない時
  • IntelliJ IDEA単品からAll Products Packにアップグレードしてみる #侍割
  • Browser syncでネットワーク速度をエミュレーションする

カテゴリー

  • CSS
  • IntelliJ IDEA
  • iPhone
  • JavaScript
  • PHP
  • オーディオ
  • ガジェット
  • 備忘録
  • 雑記

アーカイブ

  • 2020年9月
  • 2019年8月
  • 2018年12月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年4月
  • 2018年1月
  • 2017年12月
  • 2017年11月
  • 2017年10月
  • 2015年10月
  • 2015年9月
  • 2015年4月
  • 2015年3月
  • 2015年2月
  • 2012年7月

COPYRIGHT © ChNK Design.