フォームで改行して入力した情報を別のページでも改行が反映されるように表示する

フォームで入力した情報を別ページで表示する

// bootstrap5でCardを使用
// itemsテーブルに保存された情報をページに表示
  <div class="card-body">
    <h5 class="card-title"><%= @item.name %></h5>
    <p class="card-text"><%= @item.text %></p>
    <p class="card-text"><small>¥<%= @item.price %>(税込)</small></p>
    <%= link_to "カートに入れる", "", class: "btn btn-outline-secondary btn-sm" %>
  </div>

現在の記述はこのような表示となっております。

商品登録する際のフォームでは商品説明文は改行してます。

しかし、改行が反映されておらず、非常に読みづらい文章となっています。

改行を反映させる記述

結論から申し上げると正規表現、simple_formatメソッドを使用する

// 先ほどの記述でテキストを表示する部分を編集
<p class="card-text"><%= simple_format(@item.text) %></p>

私は正規表現だと正しく改行が行われなかったので、

強制的に"p"タグを挿入するsimple_formatメソッドを使用しました。

更にここの改行スペースを調整したい場合はCSSを以下のように追記すると可能みたいです。

/* pタグの"card-textプロパティ指定する" */

. card-text p {
 /* 適応したいスタイル */
}

こちらは必要であれば行います。

現在はフォームで改行した箇所が正しく反映されてます

参考にしたURL

sashimistudio.site

qiita.com