Rails迭代字符串与链接数组时换行问题及合并显示需求

我有如下数组：

<% array = [
  "This is a string, ",
  link_to("And this is a link", root_path),
  ", And I want it all to be on the same line!",
  "

  This part, I want on the new line!"
] %>

（注：数组最后一项包含有意添加的换行符，在控制台中显示为\n）

我在Rails视图中通过如下代码迭代渲染该数组：

<div class="post-content">
  <% array.each do |c| %>
   <%= c %>
  <% end %>
</div>

同时使用如下CSS样式：

.post-content {
    white-space: pre-line;
}

实际执行后，数组的每个元素都显示在新行，浏览器检查器显示结构如下：

<div class="post-content">
  " This is a string,  "
  <a href="/">And this is a link</a>
  " , And I want it all to be on the same line! This part, I want on the new line! "
</div>

我的疑问是：我认为每个数组元素被当作不同元素渲染，该理解是否正确？若正确，能否将数组所有元素渲染为单个元素？

你的理解是正确的 #

用array.each迭代输出时，Rails会在每个<%= c %>的输出之间插入换行和空格等空白字符，浏览器会将这些空白解析为内容分隔符，再配合white-space: pre-line保留换行的特性，就导致每个元素显示在独立行。

实现单元素渲染的方法 #

直接将数组元素拼接后输出即可，无需逐个迭代：

<div class="post-content">
  <%= array.join %>
</div>

这样Rails会把数组内的所有内容（包括link_to生成的HTML标签）拼接成一个整体输出，浏览器只会识别到连续的内容块，完全符合你的需求：

• 前三个元素会在同一行显示
• 最后一个元素内的换行符会被white-space: pre-line解析为换行，实现新行展示

注意：link_to生成的是HTML字符串，join方法会直接将其与普通字符串拼接，不会破坏HTML结构，渲染后的链接依然可正常点击。

内容的提问来源于stack exchange，提问作者isMattCoding