javascript检查链接内的文本 anchor 文本是否溢出

Question

当我有这个 css/html 时，是否可以检查 anchor 文本是否溢出？

<a href="#" style"overflow:hidden; width:100px; display:block;>
    This is a very long text. This is a very long text. This is a very long text.
</a>

我使用 Jquery 或纯 javascript

Answer 1

您可以将文本内容分配给一个 tmp 元素，然后计算它的宽度并将其与 <a> 进行比较width 检查内容是否溢出。见下文，

DEMO

$('a').on('click', function () {
    var $tmp = $('<a/>')
                .text($(this).text())
                .css('display','none')
                .appendTo('body');
    alert(($tmp.width() > $(this).width())?'Overflows':'Perfectly Inside');
    $tmp.remove();
});