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

【问题标题】：Getting OSX Safari to honor css "white-space: pre"让 OSX Safari 尊重 css "white-space: pre"
【发布时间】：2017-11-29 00:20:42
【问题描述】：

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

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

Chrome 和 Firefox 可以很好地显示 html 页面，但出于某种奇怪的原因……当我要求 Safari 仅执行“pre”时，它正在执行“pre-wrap”。我必须拥有保留空白和 nowrap 组合功能......这是“pre”但没有被 safari for osx 尊重。

有没有人可以解决这类问题？从大量测试中我很清楚，firefox 和 chrome 支持 CSS white-space 属性定义的“pre”，但 safari for osx 不支持。我不想使用 &nbsp，因为这使我的源 htm 难以阅读和管理。

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

【问题讨论】：

我看不出有什么不同。你能添加一个工作示例吗？您使用的是旧的 OS/Safari 版本吗？您是否尝试过 <pre> 标签而不是带有 white-space: pre; 的 div？
经过进一步测试，我发现当我在本地 html 文件上托管代码时，我的文本没有预先变形，“pre”适用于包括 safari 在内的所有浏览器。 blogger.com 上托管的相同代码，文本仅在 safari 上预先包装，非常奇怪。 blogger.com 和 safari 的主题有一些奇怪的地方，特别是我猜。我尝试了每一个主题，他们都做了同样的事情。问题的代码和截图现在在这里列出productforums.google.com/forum/…

标签： html css macos safari

【解决方案1】：

即使white-space 是pre，Safari 也会错误地使overflow-wrap（又名word-wrap）应用。规范说它不应该适用于首先不允许包装的情况，但 Safari 似乎忽略了这一点。

因此，要解决此问题，请将 white-space:pre 与 word-wrap:normal 结合起来，这样就可以了。

【讨论】：

【解决方案2】：

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

它对我有用.. 钍

【讨论】：

请解释一下

【解决方案3】：

我在 Safari 11.0.3 上也遇到过同样的问题，在带有“空白：pre”格式的 jQuery 对话框中。使用 pre 标签并不能解决问题。

但是，将“word-wrap: normal”添加到工作的样式中。这是我发现适用于我的场景的最终 CSS：

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

【讨论】：

【解决方案4】：

截至 2018 年 3 月，我仍在 Safari 11 中找到此内容。块元素，例如<div>s、white-space: pre; 和 overflow: auto; 在 Safari 中的行为与 Chrome、Firefox 或 Edge 不同。文本将在容器内换行，而不是应有的滚动，如 Neal 在他在 Google 论坛上的帖子中的图片所示。

解决方法是使用<pre> 元素。 Safari 会适当地处理它，其他浏览器也会处理它。

【讨论】：