宽度小于省略号字符时的CSS省略号截断答案

【问题标题】：CSS ellipsis truncation when width is narrower than ellipsis character宽度小于省略号字符时的CSS省略号截断
【发布时间】：2015-03-11 14:23:51
【问题描述】：

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

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

这对我来说效果很好，但是当元素的宽度小于省略号字符的宽度时，它的行为就不像我想要的那样。我希望省略号字符会被截断，但原始文本会在没有省略号的情况下被截断。

有关示例，请参阅 this JSFiddle。

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

【问题讨论】：

【解决方案1】：

我也遇到了同样的问题，椭圆截断字符变为椭圆截断文本有一个宽度阈值，宽度阈值受字体大小的影响，与各种浏览器不同。如果我们知道宽度阈值，我们可以手动使用 '...' 替换原始文本。但是，宽度阈值未知...

【讨论】：