当宽度比省略号字符窄时,CSS省略号截断

Question

我正在使用以下CSS来截断带省略号的文本.

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

这对我来说效果很好,但是当元素的宽度小于省略号字符的宽度时,它的行为并不像我想的那样.我希望省略号字符将被截断,但原始文本显示截断而没有省略号.

请参阅此JSFiddle以获取示例.

虽然我可以用最小宽度来避免这个问题,但我很想知道是否有一种简单的方法来显示截断的椭圆字符而不是截断的文本.

Answer 1

我和你遇到了同样的问题，截角椭圆字符转换为截角椭圆文本有一个宽度阈值，宽度阈值受字体大小影响，并且与不同的浏览器不同。如果我们知道宽度阈值，我们可以手动使用“...”来替换原始文本。然而，宽度阈值未知......