Safari瀏覽器下代碼高亮問題：“標簽結合`white-space: pre`屬性失效的原因是什么？

標簽，并設置white-space: pre css屬性。然而，Safari瀏覽器在處理包含<script>標簽且文本較長的代碼片段時，可能會忽略white-space: pre屬性，導致代碼換行，破壞原有格式。</p> <p>@@##@@</p> <p>例如，如下代碼在Safari瀏覽器中，“#imports”可能會被換行顯示：</p> <pre class="brush:php;toolbar:false"><script> import { definecomponent } from '#imports'; </script>

<div>hello world</div>  // pre 設置可以保證不換行

這說明，當文本被特定標簽（如<script>）包裹時，white-space: pre的有效性會受到影響。</script>

為了解決這個問題，建議使用以下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文件使用 */ }

這段代碼使用了多種white-space屬性值和word-wrap屬性，以確保跨瀏覽器兼容性，并允許文本在必要時換行，從而避免Safari瀏覽器中white-space: pre失效的問題。請注意，-moz-binding部分需要配合相應的wordwrap.xml文件，本文未提供該文件內容。 使用pre-wrap允許文本換行，同時保留空格和換行符。