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

Question

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

我无法正确包装文本。我想将word-wrap: normal; overflow-wrap: break-word;包装应用到整个<listing>，但它似乎只是忽略了这些首选项，并且文本溢出了两侧。

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这就是我的浏览器（Firefox）上显示HTML的方式：

这是我之后的结果：

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

我该如何修理包装？

Answer 1

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

  

<强> 注意

     

<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.

＆＃13;

＆＃13;

listing {
  white-space: pre-wrap;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;