JavaScript 检查链接内的文本锚文本是否溢出

javascript check if text anchor text inside a link overflows

本文关键字：文本 溢出 是否 检查链接 JavaScript      更新时间：2023-09-26
当我

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

<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

您可以将文本内容分配给 tmp 元素，然后计算其宽度<a>宽度，以检查内容是否溢出。见下文，

演示 

$('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();
});

我建议：

var as = document.getElementsByTagName('a');
for (var i=0,len=as.length;i<len;i++){
    var that = as[i]
        w = that.offsetWidth,
        w2 = that.scrollWidth;
    if (w<w2) {
        console.log("This content overran!");
    }
}​

JS小提琴演示。

<小时 />

几乎以上，但以下内容还为 DOM 添加了"报告"元素：

var as = document.getElementsByTagName('a');
for (var i=0,len=as.length;i<len;i++){
    var that = as[i],
        w = that.offsetWidth,
        w2 = that.scrollWidth,
        s = document.createElement('span');
    if (w<w2) {
        var text = document.createTextNode('This content overran the container, a, element by ' + (w2-w) + 'px.');
        s.appendChild(text);
        that.parentNode.insertBefore(s,that.nextSibling);
    }
}​

JS小提琴演示。

试试这个

<div id="parent" style="overflow:hidden; width:100px;display:block">
 <a id="textblock" href="#" style="white-space: nowrap;" >
     This 
 </a>
</div>
<script>
  var p=document.getElementById("parent");
  var tb=document.getElementById("textblock");
  (p.offsetWidth<tb.offsetWidth)?alert('long'):alert('short');
</script>​

HTML：

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

JS：

function hasOverflow( $el ){
    return $el.css("overflow")==="hidden" &&  
          ($el.prop("clientWidth") < $el.prop("scrollWidth") || 
           $el.prop("clientHeight") < $el.prop("scrollHeight"));
}
console.log( hasOverflow($("#a1")) );       //true
console.log( hasOverflow($("#a2")) );       //false

演示

相关文章：