div तत्व में अतिप्रवाह का पता लगाने के लिए कैसे?

Question

मैं div तत्व में लंबवत पाठ ओवरफ़्लो का पता कैसे लगा सकता हूं?

सीएसएस:

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

आप easil कर सकते हैं

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

अधिक जानकारी के लिए पर एक नज़र डालें: http://help.dottoro.com/ljbixkkn.php

Answer 2

निम्नलिखित jQuery प्लगइन परिणाम सूचित करेंगे।

सीएसएस

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

ऊंचाई में अतिप्रवाह निर्धारित करने के लिए,

(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

Chamika के जवाब पर एक बदलाव है, तो आपका वास्तविक html में, एक आंतरिक है y है कि clientHeight साथ scrollHeight तुलना करके, निम्न प्रयास करें और बाहरी div। बाहरी div में स्थिर ऊंचाई और चौड़ाई और अतिप्रवाह छिपा होगा। आंतरिक div में केवल सामग्री है और सामग्री तक फैल जाएगी।

फिर आप गतिशील रूप से कुछ भी जोड़ने की आवश्यकता के बिना, 2 divs की ऊंचाई और चौड़ाई की तुलना कर सकते हैं।

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