はみ出さずに、改行を入力通りに表示したい！【備忘録】
こんにちは、あずなすです！
皆さん、こんな経験はありませんか？
「ユーザーが入力した通りに改行されない！？」
私は、最近、個人開発をしていて経験しました！
その時の解決方法について、備忘録も兼ねて、ここに記述してみようと思います！
何が起こった？
【発生したこと】
こういう、ユーザーが入力した文章を指定したエリアに表示させる場面ってありませんか？(以下の画面で言うと、灰色のエリア内に表示させたい！)
そして、入力してもらう。見やすく改行付きで！
いよいよ、指定したエリアに表示するぞ！えいっ！(送信ボタンを押す。)
すると...
「あれ、改行どこ行った...？めっちゃ見にくくなって表示されてるんだけどwww」
【実現したかったこと】
本当は、私はこんな風に、ユーザーが入力した文章が指定したエリアの中で収まって、改行もユーザーの入力通りに反映されている状態になってほしいと思っていました。
原因は？
- 「なぜ、改行が反映されなかったのか？」
HTML Living Standard では、 U+0009 TAB (タブ), U+000A LF (改行), U+000C FF (頁送り), U+000D CR (復帰), U+0020 SPACE (空白) の5文字を ASCII ホワイトスペースとして定めています。テキスト形式では、これら普通の空白文字として扱われ、連続したホワイトスペースは多くの場合、1文字の空白にまとめられます (この動作は CSS の white-space プロパティで変更できます)。これらは要素内の要素名と引数、クラス名の区切り文字などとしても使用されます。
(MDN公式 Whitespace (ホワイトスペース)より引用)
MDNの説明を見てみると、連続する半角スペースやタブ、改行は「ホワイトスペース」として定められているようです。
そして、これらの「ホワイトスペース」は、デフォルトで半角スペース1文字分に置き換えられてしまいます。
そのため、今回のような事態になってしまいました。
- 「なぜ、はみ出した？」
こちらについては、今回は1. 「なぜ、改行が反映されなかったのか？」と一緒に解決していきます。
解決した方法！
それでは、どのように解決したかを紹介致します！
「要素がはみ出すことなく、ユーザーが入力した通りに改行を実現する」ためには、white-spaceプロパティを指定する必要がありました。
white-spaceプロパティって何？
CSS の white-space プロパティは、要素内のホワイトスペースをどのように扱うかを設定します。
(MDN公式 white-spaceより)
white-spaceプロパティには、主に次の5つの値があります。
①normal
自動改行のおかげで要素の端に来たら改行してくれるが、ユーザーが入力した通りの改行は実現できない。
連続したホワイトスペースは1つの半角スペースにまとめられてしまう。
②nowrap
改行されず、1行で表示されてしまう。
③pre
連続したホワイトスペースはそのままで、改行文字と<br>要素で改行を反映。ユーザーが入力した通りの改行を実現できるが、自動改行されず、要素の端に来ても折り返されないため、要素からはみ出してしまうことも...。
④pre-wrap
連続したホワイトスペースはそのままで、改行文字と<br>要素、自動改行によって改行を行う。ユーザーが入力した通りの改行を実現できるし、要素からはみ出すこともない！
⑤pre-line
改行文字と<br>要素、自動改行によって改行を行う。
連続したホワイトスペースは1つの半角スペースにまとめられてしまう。
また、break-spacesと言う値も存在しますが、IEとSafari非対応なので今回は、説明を割愛します。
今回、私が実現したいことは、「ユーザーが入力した通りに改行すること」と「要素がはみ出さないように折り返すこと」の2つです。
これら2つは、white-space: pre-wrapもしくはwhite-space: pre-lineを指定することで実現することができました！！
ホワイトスペースについては、私はそのままの表示でも問題ないと思ったので、個人開発ではwhite-space: pre-wrapを採用しました！
さいごに
お読み下さり、ありがとうございました！
拙い記事ですが、同じようなことが起こった人に届けば嬉しいです！
もし、「こういうやり方の方が良いかも！」などがあればコメントお待ちしてます〜♪
参考資料
MDN公式 Whitespace (ホワイトスペース)
MDN公式 white-space
サルワカ CSSのwhite-spaceの使い方：pre、wrap、nowrapなどの違いは？
Discussion