如何让包含带样式<span>的HTML <listing>标签文本正确换行？

我之前也碰到过类似的问题，核心原因出在<listing>标签的默认行为上，咱们一步步来解决：

为什么你的设置无效？ #

<listing>是一个已废弃的HTML标签，它默认的white-space值是pre——这个规则会强制浏览器完全按照源码里的换行和空格来渲染文本，不会自动拆分长单词或者换行。所以你设置的word-wrap/overflow-wrap根本起不了作用，因为white-space: pre的优先级更高，直接锁住了换行行为。

修复方案 #

1. 调整<listing>的CSS属性（快速修复）

把white-space改成pre-wrap，这个值会保留源码里的空白和换行，同时允许浏览器在内容超出容器宽度时自动换行。配合overflow-wrap: break-word确保长单词也能被拆分换行，再加个overflow-x: auto兜底（极端情况下如果还是有溢出，会显示横向滚动条，不破坏整体布局）。

对应的CSS代码：

listing {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-wrap: break-word; /* 兼容IE和旧版浏览器 */
  max-width: 100%; /* 确保容器不超出父元素宽度 */
  overflow-x: auto;
}

2. （推荐）替换<listing>为<pre>标签

因为<listing>已经被HTML5废弃，浏览器对它的支持可能存在不一致性。换成标准的<pre>标签是更稳妥的选择——它同样能保留预格式化的空白，行为更稳定，而且是现代HTML的推荐用法。替换后应用上面的CSS即可，效果完全一致。

示例代码 #

假设你的HTML结构是这样的：

<listing class="rouge-highlight">
  <span style="color: #f92672">def</span> <span style="color: #a6e22e">super_long_function_name_that_would_otherwise_overflow_container</span>(<span style="color: #66d9ef">params</span>)
    <span style="color: #f92672">puts</span> <span style="color: #e6db74">"Hello World"</span>
  <span style="color: #f92672">end</span>
</listing>

加上上述CSS后，长函数名就会自动换行，同时保留原来的缩进和代码格式，不会溢出容器。

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