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

当我使用这个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'）。在（'click'，函数（）{
变量$tmp=$（''）
.text（$（this）.text（））
.css（'display'，'none'）
.附于（“主体”）；
警报（$tmp.width（）>$（this.width（））？“溢出”：“完全内部”）；
$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!");
    }
}​

var as=document.getElementsByTagName（'a'）；
对于（var i=0，len=as.length；i试试这个

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


var p=document.getElementById（“父项”）；
var tb=document.getElementById（“textblock”）；
（p.offsetWidthHTML：

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

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



JS：

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

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

函数hasOverflow（$el）{
返回$el.css（“溢出”）=“隐藏”&&
（$el.prop（“clientWidth”）<$el.prop（“scrollWidth”）||
$el.prop（“卷轴高度”）<$el.prop（“卷轴高度”）；
}
log（hasOverflow（$（“#a1”））；//true
log（hasOverflow（$（“#a2”））；//false

如果链接太长，您是想自动剪切？还是只是想看看文本是否超过某个宽度？