用jquery检测css text-overlow省略号

Question

CSS:

div{
    width:160px;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
    text-transform: uppercase;
}

我编辑了一个由其他人创建的小提琴,他们打算回答这个问题.

这个答案是正确的并且运作良好,但在一个案例中,这种方法效果不佳.如果文本应该是100%的框,省略号隐藏最后几个字母并添加"..."但是当你操纵css并删除溢出语句时,你会看到,大小适合.

所以这种方式并非100%可靠.但我需要一个100%的工作.
请有人帮帮我吗？

Answer 1

页面在浏览器中的显示方式与用于确定文本是否会溢出的计算之间可能存在差异.盒子模型并不总是按照我们的意愿行事.也就是说,您可以将内部宽度与滚动宽度进行比较.

这是一个简单的例子,应该对应于显示为true的椭圆:

if ($('#div')[0].scrollWidth >  $('#div').innerWidth()) {
    //ellipse should be showing because the text is in overflow
}

我更新了你的小提琴,它按预期工作.您的scrollwidth语法不正确.

e.scrollWidth vs. $(e)[0].scrollWidth

更新了新小提琴的链接:

Answer 2

我忘了发布我的解决方案。

现在我正在使用el.scrollWidth > el.clientWidth;并且效果很好。
请注意，el在这种情况下没有 jquery 包装。