在ERB文件的.each do循环中添加换行的实现方法

嘿，我来帮你搞定这个问题！你现在遇到的就是循环输出内容时没有分隔，导致所有标题和描述挤成一团的情况，其实有几种简单又靠谱的解决方式：

方法一：用CSS分隔（推荐，符合结构样式分离的最佳实践） #

这种方法不用改太多ERB代码，只需要给每个循环条目套一个容器，再用CSS控制间距，后期调整样式也方便：

<div class="row">
  <div class="col-sm-12">
    <% t('brand.welcome_paragraphs').each do |para| %>
      <!-- 给每个FAQ条目套一个容器 -->
      <div class="faq-item">
        <%= sanitize para[:title] %>
        <%= sanitize para[:description] %>
      </div>
    <% end %>
  </div>
</div>

然后在你的CSS文件里加这段样式：

/* 给除了第一个之外的所有条目添加上边距 */
.faq-item + .faq-item {
  margin-top: 1.5rem; /* 你可以根据需要调整这个间距值 */
}

这个CSS选择器的作用是：选中所有紧跟在另一个.faq-item后面的元素，只给它们添加上边距，这样第一个条目不会有多余的顶部间距，排版更整洁。

方法二：在循环中判断索引输出<br> #

如果你确实想直接用HTML换行标签，可以用each_with_index拿到循环的索引，给第二个及以后的条目前面加<br>：

<div class="row">
  <div class="col-sm-12">
    <% t('brand.welcome_paragraphs').each_with_index do |para, index| %>
      <!-- 索引大于0时（第二个及以后的元素）输出换行标签 -->
      <%= raw '<br><br>' if index > 0 %>
      <%= sanitize para[:title] %>
      <%= sanitize para[:description] %>
    <% end %>
  </div>
</div>

这里用raw是因为要确保<br>被当作HTML解析，而不是转义成文本显示。如果你的sanitize配置允许通过<br>标签，也可以用sanitize '<br>'，但raw更直接。

方法三：用块级HTML标签自动分隔 #

HTML里的块级元素（比如<p>、<section>）默认会自带上下间距，你可以把每个条目套在<p>标签里，不用额外写CSS也能分开：

<div class="row">
  <div class="col-sm-12">
    <% t('brand.welcome_paragraphs').each do |para| %>
      <p>
        <%= sanitize para[:title] %>
        <%= sanitize para[:description] %>
      </p>
    <% end %>
  </div>
</div>

这种方式最省事，浏览器默认的<p>样式就足够让内容分开，如果觉得间距不合适，再用CSS调整p的margin就行。

总的来说，优先推荐方法一，因为把样式交给CSS管理，后期要调整间距或者样式，不用动ERB代码，维护起来更方便。

内容来源于stack exchange