投稿フォームの改行

textareaで改行する方法

textareaを使って以下のような、改行した文章を投稿してみます。

f:id:nekoyutaneko:20210213161936p:plain

そして、保存したテキストを画面で表示すると

f:id:nekoyutaneko:20210213162153p:plain

スペースとして処理されてしまっています・・・

改行として読み込むように以下のstyleを適用

white-space: pre-wrap;

f:id:nekoyutaneko:20210213162823p:plain

改行には成功しましたが、レイアウトが崩れていますね。
なぜでしょうか?

表示レイアウト崩れの修正

修正前のコードが以下です。

<div class="text">
  <%= blog.text %>
</div>

修正後のコードが以下です。

<div class="text"><%= blog.text %></div>

修正前は、親要素と子要素の書き方のように、
「div開始タグ」→「改行」→「段落」→「テキスト」
と記述していたのですが、これが原因でした。
改行と段落(スペース)がテキストの一部として扱われていたからだったのですね。

無事、表示されるようになりました。

f:id:nekoyutaneko:20210213162843p:plain