निर्धारित करें कि क्या HTML तत्व की सामग्री ओवरफ्लो होती है

Question

यदि HTML तत्व ने अपनी सामग्री को ओवरफ्लो किया है तो क्या मैं जावास्क्रिप्ट (स्क्रॉलबार के बावजूद) की जांच कर सकता हूं? उदाहरण के लिए, छोटे, निश्चित आकार के साथ एक लंबी div, अतिप्रवाह गुण दृश्य में सेट, और तत्व पर कोई स्क्रॉलबार नहीं।

Answer 1

आम तौर पर, आप तुलना कर सकते हैं client[Height|Width]के साथ scroll[Height|Width]आदेश में इस का पता लगाने के ... लेकिन मान ही होगा जब अतिप्रवाह दिख रहा है। इसलिए, इसके लिए एक नियमित पता लगाना आवश्यक है:

// Determines if the passed element is overflowing its bounds,
// either vertically or horizontally.
// Will temporarily modify the "overflow" style to detect this
// if necessary.
function checkOverflow(el)
{
   var curOverflow = el.style.overflow;

   if ( !curOverflow || curOverflow === "visible" )
      el.style.overflow = "hidden";

   var isOverflowing = el.clientWidth < el.scrollWidth 
      || el.clientHeight < el.scrollHeight;

   el.style.overflow = curOverflow;

   return isOverflowing;
}

FF3, FF40.0.2, IE6, Chrome 0.2.149.30 में परीक्षण किया गया।

Comments

शुक्रिया Shog9 ... पता लगाने की दिनचर्या है, मुझे लगता है, मुझे क्या चाहिए, क्योंकि मैं अतिप्रवाह (छिपी / दृश्य) के साथ

मैं stackoverflow.com/questions/2023787/… पर एक समान प्रश्न करता हूं, जहां मैं यह पता लगाने की कोशिश कर रहा हूं कि किस तत्व के कुछ हिस्सों में अतिप्रवाह छिपा है।

— स्लेलाइफ

मुझे आश्चर्य है कि क्या यह एक छोटी झिलमिलाहट देगा क्योंकि शैली को संक्षेप में बदल दिया गया है?

— स्टिजन डी विट

+1। यह आधुनिक ब्राउज़रों पर काम करता है (इस लेखन के समय से कम से कम क्रोम 40 और अन्य वर्तमान संस्करण ब्राउज़र सहित)।

— 19

एमएस एज में काम नहीं करता है। कभी कभी सामग्री बह निकला नहीं है, लेकिन clientWidthऔर scrollWidth1px से अलग है।

— जेस्पर 10

Answer 2

की तुलना की कोशिश करो element.scrollHeight/ element.scrollWidthकरने के लिए element.offsetHeight/element.offsetWidth

http://developer.mozilla.org/en/DOM/element.offsetWidth
http://developer.mozilla.org/en/DOM/element.offsetHeight
http://developer.mozilla.org/en/DOM_element। स्क्रॉलविद
http://developer.mozilla.org/en/DOM/element.scrollHeight

Answer 3

मुझे नहीं लगता कि यह जवाब सही है। कभी-कभी स्क्रॉलवॉथ / क्लाइंटविथ / ऑफसेटविदथ पाठ के अतिप्रवाह के बावजूद समान होते हैं।

यह क्रोम में अच्छा काम करता है, लेकिन IE और फ़ायरफ़ॉक्स में नहीं।

अंत में, मैंने इस उत्तर की कोशिश की: HTML पाठ-ओवरफ़्लो इलिप्सिस डिटेक्शन

यह एकदम सही है और कहीं भी अच्छी तरह से काम करता है। इसलिए मैं इसे चुनता हूं, शायद आप कोशिश कर सकते हैं, आप निराश नहीं होंगे।

Comments

मैं इस उत्तर को हटाने या हटाने का सुझाव देता हूं, क्योंकि इसमें कुछ दोष है। मैं पहली बार में इस का उपयोग करें, लेकिन यह कुछ विशेष सीएसएस शैली के साथ सही काम नहीं कर सकता।

— zjalex

Answer 4

एक अन्य तरीका अपने माता-पिता की चौड़ाई के साथ तत्व चौड़ाई की तुलना करता है:

function checkOverflow(elem) {
    const elemWidth = elem.getBoundingClientRect().width
    const parentWidth = elem.parentElement.getBoundingClientRect().width

    return elemWidth > parentWidth
}

Answer 5

JQuery के साथ आप कर सकते हैं:

if ( $(".inner-element").prop('scrollHeight') > $(".inner-element").height() ) {

    console.log("element is overflowing");

} else {

    console.log("element is not overflowing");

}

को बदलें .prop('scrollWidth')और .width()यदि आवश्यक हो तो।

Answer 6

यह एक जावास्क्रिप्ट समाधान (म्यूटूल के साथ) है जो इलाहडर की सीमाओं को फिट करने के लिए फ़ॉन्ट आकार को कम करेगा।

while (elHeader.clientWidth < elHeader.scrollWidth || elHeader.clientHeight < elHeader.scrollHeight) {
  var f = parseInt(elHeader.getStyle('font-size'), 10);
  f--;
  elHeader.setStyle('font-size', f + 'px');
}

ElHeader का सीएसएस:

    width:100%;
    font-size:40px;
    line-height:36px;
    font-family:Arial;
    text-align:center;
    max-height:36px;
    overflow:hidden;

ध्यान दें कि eleaeader का रैपर elHeader की चौड़ाई निर्धारित करता है।