Làm thế nào để phát hiện tràn trong phần tử div?

Question

Làm cách nào tôi có thể phát hiện tràn văn bản dọc trong phần tử 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

Bạn có thể easil y làm điều đó bằng cách so sánh scrollHeight với clientHeight, hãy thử như sau:

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

Để biết thêm thông tin xin hãy xem tại địa chỉ: http://help.dottoro.com/ljbixkkn.php

Answer 2

sau jQuery plugin sẽ báo kết quả.

CSS

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

Để xác định tràn trong chiều rộng,

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

Để xác định tràn vào chiều cao,

(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

Một biến thể của câu trả lời Chamika là để, trong html thực tế của bạn, có một nội và bên ngoài Div. Div bên ngoài sẽ có chiều cao và chiều rộng và tràn ẩn tĩnh. Div bên trong chỉ có nội dung và sẽ kéo dài đến nội dung.

Sau đó, bạn có thể so sánh chiều cao và chiều rộng của 2 Div, mà không cần phải tự động thêm bất kỳ thứ gì.

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