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

Question

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

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

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

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

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

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

score 15 · Accepted Answer

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

JavaScript

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

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

演示

1 回答 1