जावास्क्रिप्ट: यह पता लगाना कि पाठ

Question

लपेटता है, तो मैं कैसे पता लगा सकता हूं कि टेक्स्ट का एक टुकड़ा लपेट जाएगा या नहीं?

तो कल्पना करें कि मेरे पास एक शीर्षलेख वाला UI है जिसमें बड़े पैमाने पर टेक्स्ट है। मैं यहां सबसे बड़ा टेक्स्ट चाहता हूं जो मेन्यू बार में लंबवत फिट बैठता है। यह संख्यात्मक डेटा प्रदर्शित करता है:

LABEL: 9999 LABEL2: 99999 

संख्या भागों बड़े हो सकते हैं। कुछ स्क्रीन पर - उदा। फोन - यह तत्व को उस बार के नीचे बहने और लपेटने का कारण बनता है जिसमें इसे रहना चाहिए। मैं अतिप्रवाह नहीं करना चाहता: छुपा हुआ। मैं चाहता हूं कि उपयोगकर्ता पूरी चीज देख सके।

मैं किसी भी तरह से यह गणना करने में सक्षम होना चाहता हूं कि तत्व कितना बड़ा होगा, और यदि यह फ़ॉन्ट को पूर्व-खाली रूप से छोटा कर देगा, संभवतः स्थान बनाने के लिए तत्व को छोड़ दें।

Answer 1

यदि आप white-space सीएसएस हैंडलिंग nowrap पर सेट करते हैं तो आप तत्व तत्व की चौड़ाई और स्क्रॉल चौड़ाई के विभिन्न चौड़ाई गुणों के बीच अंतर का पता लगा सकते हैं।

प्रदर्शन करने के लिए यहां jsFiddle है।

एक बार जब आप जानते हैं कि स्क्रॉल चौड़ाई चौड़ाई से अधिक व्यापक है, तो आप पाठ का आकार बदल सकते हैं या ऐसा करने के लिए आपको जो करना है, वह कर सकते हैं।

Answer 2

नाइस @WooCaSh। कॉफीस्क्रिप्ट में एक आवेदन यहां दिया गया है:

autoGrow = -> 
    (scope, element, attrs) -> 
    update = -> 
     if element[0].scrollWidth > element.outerWidth isBreaking = true else isBreaking = false 
     element.css 'height', 'auto' if isBreaking 
     height = element[0].scrollHeight 
     element.css 'height', height + 'px' if height > 0 
    scope.$watch attrs.ngModel, update 
    attrs.$set 'ngTrim', 'false' 

# Register 
App.Directives.directive 'autoGrow', autoGrow