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

Question

我有一个 HTML <listing> 标签，其中包含可能 <span> 带有 color CSS 样式的标签，由 Ruby 生成Rouge 语法高亮引擎。使用 <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

Note

<listing> tag is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

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>

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

Wrapping a listing containing formatted spans

html

css

indentation

rouge