检测文本溢出并添加提示工具包含完整文本

Question

我有一个简单的span标签，里面包含一个电子邮件地址。

<span id="email">[e-mail]</span>

在我的 CSS 中，span 元素被设置为固定宽度，并带有省略号溢出效果。

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

这段代码可以正常工作。不过，我希望能够以某种方式检测它是否起作用，并在的title属性中显示完整的文本。

我该怎么做？如果纯CSS无法实现，则jQuery是次佳选择。

- Connell

---

你能不能把它放在标题里呢？那些已经看到的人不会悬停查找它。 - MDEV

你不能通过CSS修改DOM以添加 title 属性，所以必须使用Javascript/jQuery。dotdotdot 在这方面非常出色。 - CodingIntrigue

@SmokeyPHP，这不是针对一个盒子的问题，而是针对页面上一堆盒子的问题。抱歉，为每个包含其内容的span添加标题似乎有些过度，只是为了迎合我们用户中1%的长电子邮件地址或四联姓氏！ :P - Connell

@RGraham，我想那应该是这样的。我在想是否有一些像:after { content: 'blah' }这样的DOM魔法。dotdotdot的网站上似乎没有关于工具提示的任何信息。难道我错过了什么吗？ - Connell

@ConnellWatkins callback 方法允许您测试是否添加了省略号，然后您可以根据需要设置 title 属性。 - CodingIntrigue

啊哈！谢谢。不过，我已经选择了@insertusernamehere的解决方案，因为它更加轻量级。 - Connell

Answer 1

在CSS中无法检测溢出。但是使用JavaScript，代码如下：

JavaScript

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

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

演示

购买前先试用

- insertusernamehere

---

非常完美。戴夫会很高兴的 ;) 我可以问一下为什么你从 offsetWidth 改成了 clientWidth 吗？两者都好像都能用（我正在使用谷歌浏览器）。 - Connell

offsetWidth 的问题在于它还包括边框。看一下这个极端示例，就会失败。 - insertusernamehere

为什么要使用复杂的表达式？这个等价于：if (e.scrollWidth > e.clientWidth)。 - Daniel Lidström

@DanielLidström 这我也不确定。说得好。我用更简单的表达式更新了答案。我想我当时从自己的一个项目中借鉴了一些其他因素，所以没有把它简化到足够简单来回答这个问题。 - insertusernamehere