检测文本溢出是否有效，并添加包含全文的工具提示 [英] Detect text-overflow has worked and add tooltip containing full text

问题描述

我有一个简单的跨度，其中包含一个电子邮件地址.

I have a simple span containing an email address.

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

在我的CSS中，跨度被设置为固定宽度，并带有省略号溢出.

In my CSS, the span is set to a fixed width with ellipsis overflow.

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

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

This works fine. However, I'd like to detect that it's worked somehow and display the full text in the span's title attribute.

我该怎么做?纯CSS会是完美的，但是如果不可能的话，那么jQuery将是下一个最好的选择.

How can I do this? Pure CSS would be perfect, but if that's not possible then jQuery is the next best thing.

推荐答案

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

You can't detect an overflow with CSS. But using JavaScript it's simply this:

JavaScript

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

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

演示

购买前试用

这篇关于检测文本溢出是否有效，并添加包含全文的工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！