Safari 브라우저에서 문제를 강조하는 코드 :`````태그가 ​​무효화 된 이유는 무엇입니까? white-space : pre '속성?

사파리 브라우저 코드 강조 문제 및 솔루션

웹 개발에서 코드 스 니펫을 명확하게 표시하고 형식 및 압입을 유지하기 위해 일반적으로 사용됩니다.<code><code>标签结合<code><pre class="brush:php;toolbar:false"></pre>标签，并设置<code>white-space: pre CSS属性。然而，Safari浏览器在处理包含<script>标签且文本较长的代码片段时，可能会忽略&lt;code&gt;white-space: pre属性，导致代码换行，破坏原有格式。</script>

例如，如下代码在Safari浏览器中，“#imports”可能会被换行显示：

<script>
import { definecomponent } from '#imports';
</script>그리고 간단합니다<code><div> 이 문제는 태그에서 발생하지 않습니다.<pre class="brush:php;toolbar:false"><div> 안녕하세요 세계</div> // 사전 설정은 줄이 나오지 않도록 할 수 있습니다

이것은 텍스트에 레이블이 붙어있을 때 (예 : <script>）包裹时，&lt;code&gt;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文件使用 */
}

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