css - 文本溢出：省略号在 Android 上跳到文本后面

Question

我试图用文本溢出省略一个 h2 标记。它在所有浏览器上都可以正常工作，但在 Android 上。

三个点跳到剪辑文本后面，因此您实际上看不到省略号。

h2的CSS是：

    h2 {
    font-size: 20px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 40%;     
}

我有很多其他风格，但不知道会影响到什么。

我做了一个虚拟测试，效果很好，所以我想知道是否有人以前经历过这种行为？

score 11 · Accepted Answer

所以我设法通过逐行运行css来弄清楚。事实证明，这是 text-rendering: optimizeLegibility; 导致错误的原因！删除它，现在它完美地工作了！

score 0 · Accepted Answer

这对我有用

基本上添加 text-rendering: auto; 到你的有省略号的 CSS

2 回答 2