फ़ॉन्ट आकार को div-size में कैसे अनुकूलित करें?

Question

एक निश्चित ऊंचाई & चौड़ाई वाला एक div है। इस div में गतिशील सामग्री, टेक्स्ट-सामग्री शामिल है। यदि पाठ बहुत लंबा हो जाता है, तो यह div को "विस्फोट" कर देगा। और जब पाठ बहुत छोटा हो जाता है तो div थोड़े खाली दिखाई देगा।

तो मेरा निष्कर्ष टेक्स्ट को छोटा होने पर टेक्स्ट छोटा और छोटा होने पर फ़ॉन्ट को बड़ा बनाना होगा।

इस तरह की कोई चीज़ कभी कोशिश नहीं की, इसे कैसे प्राप्त किया जाए?

€: जैसा कि मैं jquery या किसी अन्य ढांचे समेत जेएस ढांचे के रूप में पहले से ही डोजो का उपयोग कर रहा हूं, कोई विकल्प नहीं है। बेशक अभी भी जवाब के लिए धन्यवाद।

Answer 1

अपने डीआईवी के अंदर एक और तत्व बनाएं और टेक्स्ट जोड़ें।

तत्व द्वारा अपने डीआईवी की चौड़ाई को विभाजित करें, 100 से गुणा करें और आपको सीएसएस फ़ॉन्ट-आकार के लिए प्रतिशत मान मिल गया है।

हालांकि आपको सही फिट पाने के लिए अपने बाहरी डीवी पर फ़ॉन्ट आकार के साथ खेलना होगा।

Answer 2

jQuery शायद सबसे आसान विकल्प है। height एक निश्चित मूल्य से अधिक है तो आप बॉक्स के font-size को बदलने के लिए css फ़ंक्शन का उपयोग कर सकते हैं? this fiddle पर एक नज़र डालें (जिसे मैंने क्रोम में परीक्षण किया है)।

$(function() { 
    $('.text').each(function() { 
     if($(this).height() > 30) 
      $(this).css('font-size', '12px'); 
    }); 
}); 

Answer 3

आप string.length का उपयोग कर अपने स्ट्रिंग की लंबाई प्राप्त करने के लिए द्वारा जावास्क्रिप्ट के साथ ऐसा कर सकता है, और फिर jQuery .css() विधि गतिशील (http://api.jquery.com आकार निर्धारित करने के लिए/सीएसएस /)। या यदि आप अपने सेट अप के साथ कुछ सर्वरसाइड स्क्रिप्टिंग कर सकते हैं तो आप पृष्ठ लोड होने से पहले इनलाइन शैली के साथ आकार सेट कर सकते हैं। The jquery .css method is here

संपादित करें: अपने संपादन पुनः डोजो के बाद, आप एक ही मूल विधि का उपयोग कर सकते हैं, लेकिन सिर्फ jquery वाले लोगों के बजाय डोजो विधियों का उपयोग करके फ़ॉन्ट आकार सेट करें। This tutorial सहायक लग रहा है।

Answer 4

ऐसे कई प्लगइन हैं जो इसके लिए उपयुक्त हो सकते हैं। उनमें से एक here।

Answer 5

यह संभव है jQuery

$(document).ready(function() { 
var originalFontSize = 12; 
var sectionWidth = $('...').width(); 
$('...').each(function(){ 
var spanWidth = $(this).width(); 
var newFontSize = (sectionWidth/spanWidth) * originalFontSize; 
$(this).css({"font-size" : newFontSize, "line-height" : newFontSize/1.2 + "px"}); 
}); 
}); 

आशा के साथ इस मदद की! मैं थोड़े सवाल को पोस्ट करता हूं और मॉडरेटर ने कहा कि यह एक विषय-वस्तु प्रश्न है :)