問題
- textareaなどで入力した文章をそのまま表示すると改行が反映されない問題
- 意外と知られてなさそうなので投稿してみました
CodePenを使ってみたかった
解決方法
- CSSに
white-space: pre-wrap;
を書くと改行文字で改行してくれます - さらに、
word-wrap: break-word;
で単語の途中でも改行するようになり、文字がはみ出すのを防げます
デモ
See the Pen CSSだけで改行を反映 by hiroki-ota (@mikan3rd) on CodePen.