Le code mettant en évidence le problème sous le navigateur Safari: quelle est la raison de l'invalidation de la balise `` `` combinée avec l'attribut `espace blanc: pre`?

Code de navigateur Safari met en évidence le problème et la solution

En développement Web, afin d'afficher clairement les extraits de code et de conserver leur formatage et leur indentation, il est généralement utilisé<code><code>标签结合<code><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"></pre><div class="contentsignin">Copier après la connexion</div></div>标签，并设置<code>white-space: pre CSS属性。然而，Safari浏览器在处理包含<script>标签且文本较长的代码片段时，可能会忽略&lt;code&gt;white-space: pre属性，导致代码换行，破坏原有格式。</script>

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

<script>
import { definecomponent } from '#imports';
</script>Et simple<code><div> Ce problème ne se produira pas avec l'étiquette:<pre class="brush:php;toolbar:false"><div> Bonjour le monde</div> // Les paramètres pré peuvent garantir qu'aucune ligne ne se casse

Cela signifie que lorsque le texte est étiqueté (par exemple <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允许文本换行，同时保留空格和换行符。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!