Safari浏览器下代码高亮问题：``标签结合`white-space: pre`属性失效的原因是什么？-css教程-PHP中文网

Safari浏览器下代码高亮问题：``标签结合`white-space: pre`属性失效的原因是什么？

心靈之曲

发布： 2025-03-25 10:18:01

原创

608人浏览过

safari浏览器代码高亮显示问题及解决方案

在网页开发中，为了清晰地展示代码片段并保留其格式和缩进，通常会使用<code><code>标签结合<code>

</code>标签，并设置<code>white-space: pre</code> CSS属性。然而，Safari浏览器在处理包含<code><script></code>标签且文本较长的代码片段时，可能会忽略<code>white-space: pre</code>属性，导致代码换行，破坏原有格式。</p>
<p>@@##@@</p>
<p>例如，如下代码在Safari浏览器中，“#imports”可能会被换行显示：</p>
<pre class="brush:php;toolbar:false;"><script>
import { definecomponent } from '#imports';
</script>

登录后复制

而简单的<code>

标签则不会出现此问题：

<div>hello world</div>  // pre 设置可以保证不换行

登录后复制

这说明，当文本被特定标签（如<code><script></script>）包裹时，<code>white-space: pre的有效性会受到影响。

标书对比王

标书对比王是一款标书查重工具，支持多份投标文件两两相互比对，重复内容高亮标记，可快速定位重复内容原文所在位置，并可导出比对报告。

查看详情

为了解决这个问题，建议使用以下CSS代码：

pre {
  white-space: pre-wrap; /* CSS3 */
  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* Internet Explorer 5.5+ */
  -moz-binding: url('./wordwrap.xml#wordwrap'); /* 需要配合wordwrap.xml文件使用 */
}

登录后复制

这段代码使用了多种<code>white-space属性值和<code>word-wrap属性，以确保跨浏览器兼容性，并允许文本在必要时换行，从而避免Safari浏览器中<code>white-space: pre失效的问题。请注意，<code>-moz-binding部分需要配合相应的<code>wordwrap.xml文件，本文未提供该文件内容。使用<code>pre-wrap允许文本换行，同时保留空格和换行符。