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

debugcn 发表于 Dev

亚伦克里斯蒂安森

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

不过，我无法让文本正确换行。我想将word-wrap: normal; overflow-wrap: break-word;wrapping 应用于整个<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标签，但这没有任何区别。

我应该如何修复包装？

布万

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。