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

时间:2015-01-13 15:16:21

标签: css3 ellipsis truncation

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

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

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

有关示例,请参阅this JSFiddle

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

1 个答案:

答案 0 :(得分:1)

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