javascript - white-space:pre 在特定情况下的兼容问题?

Question

<pre>
  <code>
   <span class="line" line="1">
     <span class="ct-37eef5">&lt;</span>
     <span class="ct-0af0e9">script</span>
     <span class="ct-37eef5">&gt;</span>
   </span>
   <span class="line" line="2">
     <span class="ct-4418b3">import</span>
     <span class="ct-fe6a7b"> { </span>
     <span class="ct-eee4a0">defineComponent</span>
     <span class="ct-fe6a7b"> } </span>
     <span class="ct-4418b3">from</span>
     <span class="ct-fe6a7b"> </span>
     <span class="ct-f9ca09">'#imports'</span>
    <span class="ct-fe6a7b">;
  </code>
</pre>

上面的 html 代码片段是代码高亮中的部分内容,对应的是

import { defineComponent } from '#imports';

如果希望保持书写时的缩进和空格,可以设置下面的 css 属性

pre code {
  white-space: pre
}

但是发现在 safari 浏览器中,'#imports' 会换行显示。后来经过测试发现

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

如果字符串被 span 包裹,pre 设置就会失效。不知道你们有没有遇到过同样的问题

Answer 1

这个你试过了吗

pre { 
white-space: pre-wrap; /* css-3 */
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'); 
}