Question

当我有这个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

Answer 1

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

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

Answer 2

我建议：

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 Fiddle demo

以上几点，但以下内容也增加了一个“报告”。 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 Fiddle demo

Answer 3

试试这个

<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>

Answer 4

<强> 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

DEMO

javascript检查链接中的文本锚文本是否溢出

4 个答案: