html - 包装包含格式化跨度的列表

Question

我有一个 HTML标签，其中包含由 Ruby 的 Rouge 语法高亮引擎生成的带有CSS 样式的<listing>可能标签。使用A是因为标记包含必须呈现的空白。<span>color<listing>

我无法让文本正确换行。我想对word-wrap: normal; overflow-wrap: break-word;整个<listing>.

<listing style="width: 200px; height: 200px; word-wrap: normal; overflow-wrap: break-word; background-color: #eee;">
<span style="color: #444"># This is a comment, but it's too long.</span>
<span style="color: blue">public</span> <span style="color: blue">class</span> <span style="color: black">Empty {
    <span style="color: #444"># This is indented using markup.</span>
    <span style="color: red">A.Long.Chain.Of.Accessors.And.Other.Calls()</span>
<span style="color: black">}</span>
</listing>

这是 HTML 在我的浏览器 (Firefox) 上的显示方式：

这是我追求的结果：

我也尝试将格式规则应用于span标签，但这没有任何区别。

我应该如何修复包装？

Answer 1

listing标签默认具有white-space:pre...尝试将其更改为pre-wrap

笔记

<listing>标签已过时。尽管它在某些浏览器中可能仍然有效，但不鼓励使用它，因为它可能随时被删除。尽量避免使用它。

listing {
  white-space: pre-wrap;
}

<listing style="width: 200px; height: 200px; word-wrap: normal; overflow-wrap: break-word; background-color: #eee;">
  <span style="color: #444"># This is a comment, but it's too long.</span>
  <span style="color: blue">public</span> <span style="color: blue">class</span> <span style="color: black">Empty {
    <span style="color: #444"># This is indented using markup.</span>
  <span style="color: red">A.Long.Chain.Of.Accessors.And.Other.Calls()</span>
  <span style="color: black">}</span>
</listing>