使用 nuxt 时如何解决 safari 上的渲染问题？答案

【问题标题】：How can I fix rendering issue on safari while using nuxt?使用 nuxt 时如何解决 safari 上的渲染问题？
【发布时间】：2021-11-10 19:58:45
【问题描述】：

我使用的是 Do Hyeon 字体，除 Safari 外，所有浏览器都可以正常显示。如果文本太短或不是大写，safari 会忽略空格。但是，如果我单击或悬停文本，它会以空格重新呈现。

有谁知道为什么会这样，我该如何解决？

我已经尝试添加这些 css 属性，但没有成功。

text-rendering: optimizeLegibility;
-webkit-font-feature-settings: 'kern' 1;

（第二张图）当我选择文字时

【问题讨论】：

【解决方案1】：

我认为这是 Safari 的问题，但不幸的是，我找不到发生这种情况的原因。

但是，在测试了一些 css 属性之后，我用来显示省略号的那个也适用于这个问题，所以我将把代码留在这里，以防有人遇到同样的问题。

display: -webkit-box;
-webkit-line-clamp: 10;
-webkit-box-orient: vertical;
max-height: 10rem;

同样，这些属性最初用于省略号，尤其是用于 safari： https://stackoverflow.com/a/61515590/12332180 但很可能，这与修改文本有关，这就是为什么它也适用于我的情况。

【讨论】：