如何用CSS实现<pre>标签内容两行合并为一行显示？

问题描述 #

现有如下HTML代码，<pre>标签内的文本通过换行符\n分隔：

<pre>
one
two
three
four
five
six
</pre>

希望在浏览器中呈现为两行一组合并显示，每组内容用类似制表符的间距分隔，效果如下：

<pre>
one	two
three	four
five	six
</pre>

可行的CSS解决方案 #

可以通过CSS Grid布局轻松实现这个需求，具体代码如下：

pre {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 2ch; /* 调整这个值模拟制表符间距，2ch接近默认制表符宽度 */
  white-space: nowrap; /* 避免单行文本因容器宽度不足折行 */
}

方案说明 #

• 将<pre>设为Grid容器，指定两列自适应宽度的网格列，原本每行的文本会按顺序自动填充到网格单元格中，自然实现两行一组并排的效果。
• gap属性控制两列内容的间距，可根据需求调整数值，2ch是贴近默认制表符宽度的取值，也可用1em等单位替代。
• white-space: nowrap确保每组内容保持在同一行，不会因容器宽度限制折行。

若文本行数为奇数，最后一行内容会单独占据第一列，不影响整体布局。

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