Question

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

我希望源代码易于阅读，所以希望使用＆＃34; white-space：pre＆＃34;在浏览器显示时保留原始输出的空白格式。

Chrome和Firefox显示html页面很好，但出于某种奇怪的原因...... Safari正在做＆＃34;预包装＆＃34;当我要求它做＆＃34; pre＆＃34;。我必须有保留空白和nowrap组合功能......这是＆＃34; pre＆＃34;但是没有被osx的野生动物园所尊重。

有没有人针对此类问题采取任何解决方法？我从很多测试中都清楚地知道firefox和chrome支持＆＃34; pre＆＃34;由CSS white-space属性定义，但osx的safari没有。我不想使用＆amp; nbsp，因为这会使我的源htm难以阅读和管理。

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

Answer 1

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

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

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

Answer 2

到目前为止，我仍然在Safari 11中找到了这个。块元素，例如<div>，white-space: pre;和overflow: auto;在Safari中的行为与Chrome，Firefox或Edge不同。文本将包装在容器内，而不是按照应有的方式滚动，如他在Google论坛上的帖子中包含的Neal图像所示。

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

Answer 3

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

为我工作..

Answer 4

即使overflow-wrap为word-wrap，Safari也会错误地应用white-space（又名pre）。规范说，当一开始不允许包装时，它就不适用，但是Safari似乎忽略了它。

因此，要解决此问题，请将white-space:pre与word-wrap:normal结合使用，您应该会很好。

让OSX Safari尊重css＆＃34; white-space：pre＆＃34;

4 个答案: