检测文本溢出已经起作用并添加包含全文的工具提示

Question

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

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

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

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

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

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

Answer 1

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

<强>的JavaScript

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

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

<强>演示

Try before buy