jquery如何判断div是否文本溢出

Question

如图

div里面的文字，css为

display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

效果就是在拉伸div，改变其宽度的时候，溢出的文字以“...”表示
问题在于，当文本省略的时候，需要一个tips显示，文本没有省略时候，不需要tips

如果没有后面的要求，直接在每条div中设置title="" 即可

我的思路是 1 判断div 文本是否溢出 2 通过mouseenter的方式决定是否显示tips
1 如何判断文本溢出 没有很好的解决方案

有什么好的解决方案？

Answer 1

$(selector).map(function() {
    if (this.offsetWidth < this.scrollWidth) {
        // do whatever you want
    }
});

详情请看这个jsfiddle：http://jsfiddle.net/1hzhrwLs/。可以看到内部文本超出外框范围的就会被标红。

浏览器兼容性未经测试。

刚想到有个问题是：这个方法仅仅判断了调用当时的宽度状况。如果容器的尺寸改变（一个典型原因是窗口大小改变）就需要重新执行。仅仅放在$(document).ready()中可能是不周全的。

---

这个需求应当摆到次要的优先级，应当提问到社区上有了答案再说（以便程序员的工时做更重要的事情）。

但一上来就把需求本身给否了的想法，个人感觉真的不应当。题主是为了“克服不必要的重复信息给用户带来的迷惑”，这个目标本身是件应该鼓励的好事。

回答者没有想法可以不作答。项目团队没有方案可以不实现。可是打压这个需求本身，却绝对是个不可赞赏的行为。我不理解这是为什么。——如果故意严重点讲：在真正的团队里要是这样交流，就等同于否定团队勇于创新和精益求精的努力，绝对是拉低团队水平的内奸行为。

我能理解title实现工具提示在视觉效果上不明显，让这个事情显得“不紧要”。那么，请学习一下Bootstrap tooltip.js等JS工具提示的实现。这些实现都能够瞬时弹出，并且提示框都有相当明显的气泡样式。这个时候，工具提示就不再是一个容易忽略的次要元素了。

那么请重新审视一下：这时你还会对未经省略的完整内容，瞬时而明显的重复弹出，在心里没有半点疑虑和难受的感受吗？

---

改写出了一个使用Bootstrap 3 tooltip.js实现仅对带“…”的元素附加工具提示的实例：https://gist.github.com/shamiao/f63480c67bad75a89e36

Answer 2

溢出也用js来写吧

Answer 3

1. div 中加入 p 标签
2. P标签 display: inline-block;....设置隐藏点点点
3. 当div宽度发生改变的p标签的宽度等于div宽度的，把 div 或者 p 标签 设置title

只是个思路建议性的，需求有点奇葩。

顺便问下，为什么不用 table 这个是多么标准的table啊？

Answer 4

由於用 js 控制過光標，所以搞過類似的東西。
用一個隱藏的 div（乾脆就用 tip 的那個也行），包含要判斷的文本，然後 clientWidth 跟顯示寬度對比即可。

好像還有更好的，直接比較 offsetWidth 和 scrollWidth 就行了。。。

Answer 5

onShowNameTipsMouseenter: function(e) {
        var target = e.target;
        var containerLength = $(target).width();
        var textLength = target.scrollWidth;
        var text = $(target).html();
        //console.log("contentLength:" + containerLength);
        //console.log("textLength", textLength);
        if (textLength > containerLength) {
            $(target).attr( "title", text);
        } else {
            $(target).removeAttr( "title");
        }
    }

无意间找到的一个解决方案，不过没经过严格测试，仅供参考。
var containerLength = $(target).width(); 当前div的宽度
var textLength = target.scrollWidth; 当前文字（包括省略部分）的宽度

demo

Answer 6

要是我，就把提出这个要求的骂死，title的提示，都是长时间hover上去才有的，而且短的有怎么了？？ 显示自己高大上啊，还会自动判断，有这个必要。这种所谓的贴心小设计，别人会注意到么。。。

说不定人家还觉得你这是一种bug。

需求不合理，直接打回。