让OSX Safari尊重css"white-space:pre"

Question

我有一个博客,我正在使用带有div元素的ccs style ="white-space:pre".我这样做是为了在博客中显示大量的代码示例或cli输出..并且必须将该文本复制并粘贴到html页面中.

我希望源代码易于阅读,因此希望在浏览器显示时使用"white-space:pre"来保留原始输出的空白格式.

Chrome和Firefox显示html页面很好,但由于一些奇怪的原因...当我要求它做"预先"时,Safari正在进行"预包装".我必须有保留空白和nowrap组合功能......这是"预先"但是没有被osx的safari所尊重.

有没有人有这种问题的解决方法？我从很多测试中很清楚,firefox和chrome支持CSS前置空间属性定义的"pre",但osx的safari不支持.我不想使用,因为这使我的源htm难以阅读和管理.

提前感谢任何有用的建议.

Answer 1

我在 Safari 11.0.3 上遇到了同样的问题，在带有“whitespace: pre”格式的 jQuery 对话框中。使用 pre 标签并没有解决问题。

但是，将“自动换行：正常”添加到工作的样式中。这是我发现适用于我的场景的最终 css：

padding: 15px;
white-space: pre;
word-wrap: normal;
resize: none;
box-sizing: border-box;

Answer 2

截至 2018 年 3 月，我仍在 Safari 11 中发现这一点。在 Safari 中，阻止元素（例如<div>s）的white-space: pre;行为overflow: auto;与 Chrome、Firefox 或 Edge 不同。文本将在容器内换行，而不是按应有的方式滚动，如 Neal 在 Google 论坛上的帖子中包含的图像所示。

解决方法是使用<pre>元素。Safari 会适当地处理这个问题，其他浏览器也会以同样的方式处理它。