2011-02-01 33 views
7

असल में, मेरे पास एक निश्चित HTML तत्व है (इस मामले में, एक div) जो एक फ्लोटिंग तत्व के कारण, नीचे औसत स्क्रीन रिज़ॉल्यूशन के मामले में एक नई पंक्ति में लपेट रहा है। मैं इस व्यवहार को नियंत्रित करना चाहता हूं, तत्व को अलग-अलग रखना चाहता हूं और/या स्टाइलिंग को अलग-अलग करना चाहता हूं यदि वास्तव में यह वर्तमान में लपेटा गया है या आकार/अधिभार पर लपेटा जाएगा।यह निर्धारित करने का कोई तरीका है कि कोई तत्व लपेटा गया है या नहीं?

क्या यह संभव है?

+0

क्या होगा अगर^+ या उस प्रकृति का कुछ। क्या आप अभी भी विशिष्ट चौड़ाई के लिए दिए गए तत्व का आकार बदलना चाहते हैं? इससे मुझे निराशा होगी यदि आप जो भी मैं बढ़ाने की कोशिश कर रहा था उसका आकार बदल रहा था। – Chris

उत्तर

7

आप element.getClientRects() का उपयोग कर टेक्स्ट आयताकारों की संख्या को गिन सकते हैं, जो किसी तत्व के प्रत्येक सीमा-बॉक्स के लिए क्लाइंटरक्ट ऑब्जेक्ट देता है। इस तरह अपनी ही सीमा-बॉक्स के लिए पाठ की प्रत्येक पंक्ति के लिए एक <span> के रूप में एक इनलाइन तत्व पर किया जाना चाहिए, लेकिन यह काफी सरल उपयोग करने के लिए है: एक उपयोगकर्ता सी द्वारा आकार को बढ़ाने के लिए करना चाहता है

window.onresize = function() { 
    var span = document.getElementById("myDiv").getElementsByTagName("span")[0], 
     rect = span.getClientRects(); 

    if (rect.length > 1) // more than 1 line of text 
     doSomethingWithElement(span.parentNode); 
} 
+0

मुझे वह दिशा पसंद है जिसकी आप यहां जा रहे हैं - लेकिन मान लीजिए कि तत्व में सरल पाठ से अधिक है ... तो क्या? –

+1

@ChrisCashwell प्रत्येक तत्व की चौड़ाई की गणना करें, जबकि लूपिंग, तत्व चौड़ाई जमा करें, और जब संचित चौड़ाई कंटेनर चौड़ाई से अधिक हो, तो आप जानते हैं कि तत्व लपेट गया है। –

+2

@ क्रिसशैशवेल: अगर इसमें कोई साधारण टेक्स्ट नहीं है, तो आप '???। LastElementChild.offsetTop> 0' कर सकते हैं। – ninjagecko

संबंधित मुद्दे

 संबंधित मुद्दे