1

この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を使用します

4

4 に答える 4

2

テキスト コンテンツを 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();
});
于 2012-04-18T17:45:59.873 に答える
0

私は提案します：

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フィドルデモ。

于 2012-04-18T17:51:42.010 に答える
0

これを試して

<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>​
于 2012-04-18T18:11:45.890 に答える
0

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

デモ

于 2012-04-18T18:23:30.550 に答える