3

如图
图片描述

div里面的文字,css为

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

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

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

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

有什么好的解决方案?

2014-10-15 提问
6 个回答
11

已采纳
$(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

0

溢出也用js来写吧

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

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

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

0

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

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

0
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

-2

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

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

需求不合理,直接打回。

撰写答案

你可能感兴趣的

推广链接