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

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");
}

演示

买前先试试