चौड़ाई, IE9

Question

मैं पता लगाने के लिए एक span की सामग्री को अपनी मूल div बह निकला है अगर जरूरत है। यह क्रोम और एफएफ में ठीक काम करता है, लेकिन आईई 9 में नहीं। निम्नलिखित सीएसएस के साथ

<div class="wrapper"> 
    <span>Dynamic text content, which may or may not overflow the parent</span> 
</div> 

:: मैं निम्न HTML संरचना है

.wrapper { 
    display: inline-block; 
    width: 80px; 
    height: 20px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 

'असली' ब्राउज़रों में (यानी नहीं आईई), यह अगर अवधि div की तुलना में व्यापक है की जाँच करने के लिए आसान है :

var innerSpan = $('.wrapper span'); 
var wrapperDiv = innerSpan.parent(); 
if (innerSpan.width() > wrapperDiv.width()) { 
    // Overflow has happened 
} 

लेकिन IE9 में, innerSpan.width() करने के लिए कॉल ही दिखाई आकार, हमेशा उस आवरण के आकार छोटे निश्चित रूप से है जो देता है। आईई 9 में टेक्स्ट ओवरफ्लोउन होने पर मैं कैसे पता लगा सकता हूं?

नोट: यह केवल IE9, नहीं IE8, IE7 या किसी अन्य संस्करण के लिए काम करने के लिए की जरूरत है।

संपादित
मैं एक समाधान है, जो अतिप्रवाह का पता लगाता है, लेकिन अवधि की आवश्यकता है display: block; है पाया। नीचे मेरा जवाब देखें।

Answer 1

यह काम मैं मजबूर जब काल में ही ब्लॉक स्तर है, और अतिप्रवाह और पाठ-अतिप्रवाह उस पर गुण सेट करने के लिए। तब मैं स्क्रॉलविड्थ और ऑफसेट विड्थ का उपयोग कर सकता था।

एचटीएमएल:

<div class="wrapper"> 
    <span class="inner">Dynamic text content, which may or may not overflow the parent</span> 
</div> 

सीएसएस:

.wrapper { 
    display: inline-block; 
    width: 80px; 
    height: 20px; 
} 

.inner { 
    display: block; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden; 
} 

और अंत में, जावास्क्रिप्ट:

var innerSpan = $('.inner'); 
if (innerSpan[0].scrollWidth > innerSpan[0].offsetWidth) { 
    console.log("Overflow!"); 
} 

Answer 2

टेक्स्ट की ऊंचाई के रूप में आपकी अवधि की ऊंचाई 18px है। जब टेक्स्ट .wrapper div स्वचालित रूप से स्पैन बढ़ने की ऊंचाई को बहता है।

var height=$('.wrapper span').css("height").replace('px',''); 
    console.log(height); 
    if(parseFloat(height) > 18){ 
     console.log("overflow occured"); 
    } 

DEMO

Answer 3

तत्व क्रम में डोम में मौजूद होना चाहिए के लिए चौड़ाई की गणना की जा करने के लिए। यदि उपयोगकर्ता तत्व को देख सकने से पहले आपको इसकी गणना करने की आवश्यकता है, तो इसे DOM में डालने से पहले इसे छिपाने का प्रयास करें।

कोड संशोधित:

var innerSpan = $('.wrapper span'); 
var wrapperDiv = innerSpan.parent(); 
innerSpan.hide(); 
alert(innerSpan.width()); 
alert(wrapperDiv.width()); 
if (innerSpan.width() > wrapperDiv.width()) { 
// Overflow has happened 
} 
innerSpan.show(); 

डेमो: http://jsfiddle.net/dWzeQ/2/

आशा यह आप में मदद मिलेगी!