CSS，Safari中的wordwrapping pre标签

Question

需要在Safari中设置<pre>标记样式的最佳做法

这是我在Chrome中的代码：

与此同时，这就是Safari的样子：

任何想法的人？

pre{
    border:0;
    border-radius:0;
    border-top:$orange 2px solid;
    overflow-x: auto;
    overflow-wrap:normal;
    word-wrap: break-word;
}

Answer 1

您只需查看Chrome中的开发者工具，即可找出默认情况下设置的属性以及浏览器的位置。

然后你会发现你还需要定义 {{1}} （或类似的，就像你希望它表现一样）。

您应该在其他浏览器（如Safari或Firefox）上执行相同的操作，以“规范化”外观。

Answer 2

您可以通过将嵌入

并使用特定于Webkit的属性来使此代码正常工作，以使块超出
标记内容的边缘：


<pre>
    <code class="language-css">
       ..your code
    </code>
</pre>

<style type="text/css">

    pre {
        overflow-x: scroll;
    }

    pre > code {
        width: -webkit-max-content;
    }

</style>


我将其与prism.js一起使用，即使在iOS上也能很好地工作。