div要素のオーバーフローを検出する方法は？

Question

div要素の垂直方向のテキストオーバーフローを検出するにはどうすればよいですか？

CSS：

div.rounded { 
    background-color:#FFF; 
    height: 123px; 
    width:200px; 
    font-size:11px; 
    overflow:hidden; 
} 

HTML：

<div id="tempDiv" class="rounded"> 
    Lorem ipsum dolor sit amet, 
    consectetur  adipiscing elit. Phasellus vel quam vestibulum orci blandit laoreet. 
</div> 

Answer 1

yはclientHeightとscrollHeightを比較することで、以下を試してみてくださいすることを行います、Chamikaの答えのバリエーションがあなたの実際のHTML内にあるhttp://help.dottoro.com/ljbixkkn.php

Answer 2

次jQueryプラグインは、結果を警告します。

高さがオーバーフローを決定するために幅のオーバーフローを決定するためにCSS

#tempDiv{ 
    height:10px; 
    overflow:hidden; 
}​ 

、

(function($) { 
    $.fn.isOverflowWidth = function() { 
     return this.each(function() { 
      var el = $(this); 
      if (el.css("overflow") == "hidden") { 
       var text = el.html(); 
       var t = $(this.cloneNode(true)).hide().css('position', 'absolute').css('overflow', 'visible').width('auto').height(el.height()); 
       el.after(t);  
       function width() { 
        return t.width() > el.width(); 
       }; 
       alert(width()); 
      } 
     }); 
    }; 
})(jQuery); 

、あなたがeasilでき

(function($) { 
    $.fn.isOverflowHeight = function() { 
     return this.each(function() { 
      var el = $(this); 
      if (el.css("overflow") == "hidden") { 
       var text = el.html(); 
       var t = $(this.cloneNode(true)).hide().css('position', 'absolute').css('overflow', 'visible').height('auto').width(el.width()); 
       el.after(t); 

       function height() { 
        return t.height() > el.height(); 
       }; 
       alert(height()); 
      } 
     }); 
    }; 
})(jQuery); 

http://jsfiddle.net/C3hTV/

Answer 3

の内側を持っている：

<script type="text/javascript"> 
function GetContainerSize() 
{ 
    var container = document.getElementById ("tempDiv"); 
    var message = "The width of the contents with padding: " + container.scrollWidth + "px.\n"; 
    message += "The height of the contents with padding: " + container.scrollHeight + "px.\n"; 

    alert (message); 
} 
</script> 

詳細についてはをご覧くださいおよび外部部門。外側Divは静的な高さと幅を持ち、オーバーフローは隠されています。内部Divはコンテンツのみを持ち、コンテンツに伸びます。

これで、2つのDivの高さと幅を比較できます。動的に何も追加する必要はありません。

<div id="tempDiv" class="rounded"> 
    <div class="content"> 
     Lorem ipsum dolor sit amet, 
     consectetur  adipiscing elit. Phasellus vel quam vestibulum orci blandit laoreet. 
    </div> 
</div>