基于Chrome的浏览器无法正确渲染设置pre-wrap的<span>元素

问题场景 #

以下HTML代码在Firefox中显示正常，但在Edge、Chrome等Blink内核浏览器中，连续的评论内容会被合并，换行丢失：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>

    /* Code blocks */
    div.code {
      white-space:pre-wrap;
      display: table;
    }

    /* comment */
    div.code span.comment {
      white-space:pre-wrap;
    }

  </style>
</head>
<body>
    <div class="code">
12345678
    main()
    {
        int a;
        <span class="comment">// Comment a1</span>
        <span class="comment">// Comment a2</span>

        int b; <span class="comment">// Comment b1</span>
        <span class="comment">// Comment b2</span>

        int c; <span class="comment">// Comment c1</span>

        <span class="comment">// Comment c2</span>
    }
12345678
    </div>
</body>
</html>

Firefox显示效果（符合预期）： #

12345678
    main()
    {
        int a;
        // Comment a1
        // Comment a2

        int b; // Comment b1
        // Comment b2

        int c; // Comment c1

        // Comment c2
    }
12345678

Chrome/Edge显示效果（异常）： #

12345678
    main()
    {
        int a;
        // Comment a1// Comment a2

        int b; // Comment b1// Comment b2

        int c; // Comment c1// Comment c2
    }
12345678

原因分析 #

这是不同内核浏览器对inline元素与特殊布局容器的空白处理规则差异导致的：

• span属于inline元素，在Blink内核（Chrome/Edge）中，inline元素之间的换行、空格等空白字符会被合并，即使父元素设置了white-space: pre-wrap，这种合并规则依然生效。
• 父元素div.code设置了display: table，进一步放大了差异：Firefox在table布局中会保留inline元素间的换行，而Blink内核会将这些空白完全折叠。
• 删除span.comment的white-space设置无效，因为inline元素的该属性无法改变元素间空白的合并规则。

解决方案 #

推荐两种简单可行的修复方式：

方案1：将评论span改为块级元素 #

给span.comment添加display: block，让每个评论单独占据一行，彻底避免inline元素的空白合并：

div.code span.comment {
  display: block;
  white-space: pre-wrap; /* 可选，保留评论内容内部的换行 */
}

方案2：修改父元素的display属性 #

将父元素的display: table改为display: block，同时保留white-space: pre-wrap，让空白处理规则在各浏览器中统一：

div.code {
  white-space: pre-wrap;
  display: block;
  /* 若需要类似table的居中效果，可添加 margin: 0 auto; */
}

两种方案都能在Firefox和Chrome/Edge中得到一致的预期显示效果，无需修改HTML结构或添加额外换行符。

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