检测文本溢出有效并添加包含全文的工具提示答案

【问题标题】：Detect text-overflow has worked and add tooltip containing full text检测文本溢出有效并添加包含全文的工具提示
【发布时间】：2013-10-09 23:26:41
【问题描述】：

我有一个包含电子邮件地址的简单跨度。

<span id="email">dave@davemail.dave</span>

在我的 CSS 中，跨度设置为固定宽度，省略号溢出。

#email {
    display: inline-block;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

这很好用。但是，我想检测它是否以某种方式工作并在 span 的 title 属性中显示全文。

我该怎么做？纯 CSS 将是完美的，但如果这不可能，那么 jQuery 是下一个最好的东西。

【问题讨论】：

你能不能还是把它放在标题里，已经可以看到它的人不会徘徊寻找它
你不能用 CSS 修改 DOM 来添加 title 属性，所以它必须是 Javascript/jQuery。 dotdotdot 这个太棒了
@SmokeyPHP，不是为了这个盒子，而是为了一个页面上的一堆。抱歉，将标题添加到包含其内容的页面上的每个跨度似乎有点矫枉过正，只是为了迎合我们 1% 的电子邮件地址长或姓氏四倍的用户！ :P
@RGraham，我认为会是这样。想知道是否有像:after { content: 'blah' } 这样的 DOM 魔法。 dotdotdot 在他们的网站上似乎没有任何关于工具提示的信息。我错过了什么吗？
@ConnellWatkins callback 方法允许您测试是否添加了省略号，然后您可以根据需要设置title 属性

【解决方案1】：

您无法使用 CSS 检测溢出。但是使用 JavaScript 就是这样：

JavaScript

var e = document.getElementById('email');

if (e.scrollWidth > e.clientWidth) {
    alert("Overflow");
}

演示

【讨论】：

绝对完美。戴夫会很高兴；）我能问一下你为什么从offsetWidth 改为clientWidth 吗？两者似乎都可以正常工作（我正在使用 Chrome）
offsetWidth 的意思是，它还包括边框。看看这个极端的example 会失败的地方。
啊哈！谢谢您的帮助！ :)
为什么是复杂的表达式？这相当于：if (e.scrollWidth > e.clientWidth).
@DanielLidström 打败了我。好点子。我已经用更简单的表达式更新了答案。我想我是从我的一个项目中得到的，其中一些其他的东西被考虑到了这个等式中，我没有把它简化到足以回答这个问题。