निश्चित आकार के कंटेनर को भरने के लिए ऑटो-साइज़ डायनेमिक टेक्स्ट

Question

मुझे उपयोगकर्ता को एक निश्चित आकार के div में पाठ दर्ज करने की आवश्यकता है। मैं क्या चाहता हूं कि फ़ॉन्ट आकार स्वचालित रूप से समायोजित हो जाए ताकि पाठ बॉक्स को जितना संभव हो उतना भर सके।

तो - यदि div 400px x 300px है। अगर कोई ABC में प्रवेश करता है तो यह वास्तव में बड़ा फ़ॉन्ट है। यदि वे एक पैराग्राफ में प्रवेश करते हैं, तो यह एक छोटा फ़ॉन्ट होगा।

मैं संभवतः अधिकतम फ़ॉन्ट आकार के साथ शुरू करना चाहता हूं - शायद 32px, और जब तक कि कंटेनर को फिट करने के लिए पाठ बहुत बड़ा हो, तब तक फ़ॉन्ट आकार को छोटा करें जब तक वह फिट न हो जाए।

Comments

संभवतः जेएस की आवश्यकता के बिना एचटीएमएल 5 / सीएसएस 3 में जोड़ा जाने वाला एक सबसे आश्चर्यजनक विशेषताएं।

— जॉन मैगनोलिया

मैंने कुछ माप किए जहां मैंने एक गतिशील पाठ की लंबाई बदल दी, और कंटेनर का आकार यह पता लगाने के लिए कि कौन सा फ़ॉन्ट आकार पाठ को पूरी तरह से फिट कर देगा। और कुछ प्रतिगमन विश्लेषण करने के बाद, मैं एक सरल गणितीय फ़ंक्शन के साथ आया हूं जो स्वचालित रूप से सबसे अच्छा फ़ॉन्ट आकार उत्पन्न करेगा।

— किम

यह वास्तव में पता चला है कि ग्राफ जो आपको सबसे अच्छा फ़ॉन्ट आकार देता है, f (x) = g (अक्षर) * (x / 1000) ^ n, जहां g (x) एक सरल कार्य है, n के आधार पर भिन्न होता है। जिस फ़ॉन्ट का आप उपयोग कर रहे हैं। (हालांकि यह सभी फोंट के लिए एक मानक मान हो सकता है, अगर आप इसे बिल्कुल सही पाने के लिए इसे ट्विस्ट नहीं करना चाहते ...)। x कंटेनर के वर्ग पिक्सेल में आकार है।

— किम

यदि आप अभी भी रुचि रखते हैं, तो मैं एक उत्तर जोड़ सकता हूं। व्यक्तिगत रूप से मुझे लगता है कि स्क्रिप्ट के "सही होने" तक कोशिश करने और असफल होने के बजाय, पहले स्थान पर सही फ़ॉन्ट आकार उत्पन्न करना एक बेहतर तरीका है।

— किम

ऐसा करने के लिए एक बेहतर तरीके के लिए मेरे जवाब की जाँच करें

— हॉफमैन

Answer 1

धन्यवाद हमला । मैं jQuery का उपयोग करना चाहता था।

आपने मुझे सही दिशा में इंगित किया, और यही मैंने समाप्त किया:

यहां प्लगइन का लिंक दिया गया है: https://plugins.jquery.com/textfill/
और स्रोत का एक लिंक: http://jquery-textfill.github.io/

;(function($) {
    $.fn.textfill = function(options) {
        var fontSize = options.maxFontPixels;
        var ourText = $('span:visible:first', this);
        var maxHeight = $(this).height();
        var maxWidth = $(this).width();
        var textHeight;
        var textWidth;
        do {
            ourText.css('font-size', fontSize);
            textHeight = ourText.height();
            textWidth = ourText.width();
            fontSize = fontSize - 1;
        } while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);
        return this;
    }
})(jQuery);

$(document).ready(function() {
    $('.jtextfill').textfill({ maxFontPixels: 36 });
});

और मेरा html ऐसा है

<div class='jtextfill' style='width:100px;height:50px;'>
    <span>My Text Here</span>
</div>

यह मेरा पहला jquery प्लगइन है, इसलिए यह उतना अच्छा नहीं है जितना इसे होना चाहिए। संकेत निश्चित रूप से स्वागत है।

Comments

मैंने वास्तव में इसे साफ किया और इसे plugins

— GeekyMonkey

@GeekyMonkey, क्या आपने प्लगइन खींचा है? बस इस पृष्ठ के लिए एक डुप्ले लिंक का अनुसरण किया है, और सोचा था कि मैं एक नज़र रखूँगा, लेकिन jQuery.com आपकी साइट पर लिंक करता है 404।

— डेविड कहते हैं कि मोनिका को बहाल कर दें

नोट: मैंने पाया कि किसी कारण से यह प्लगइन तभी काम करता है जब div ($ ('jtextfill') उपरोक्त उदाहरण में) रूट डॉक्यूमेंट का हिस्सा हो। ऐसा प्रतीत होता है कि .विशेषता शून्य है (जब div अन्य divs के अंदर एम्बेडेड है)।

— जयेश

उस लूप पर "जबकि" लाइन मुझे गलत लगती है - "के आसपास कोष्ठक होना चाहिए" || उपसूचक। अब यह जिस तरह से लिखा गया है, फ़ॉन्ट का न्यूनतम आकार केवल तभी जांचा जाता है जब चौड़ाई बहुत बड़ी हो, ऊंचाई नहीं।

— प्वाईंट

यह दृष्टिकोण बहुत धीमा है, हर बार फ़ॉन्ट के आकार में परिवर्तन के लिए इसे फिर से प्रस्तुत करने के लिए तत्व की आवश्यकता होती है। ऐसा करने के बेहतर तरीके के लिए मेरे उत्तर की जाँच करें।

— हॉफमैन

Answer 2

मुझे पिछले प्रदर्शनों में से कोई भी ऐसा नहीं मिला जो खराब प्रदर्शन के कारण पर्याप्त हो, इसलिए मैंने अपना स्वयं का बनाया जो लूपिंग के बजाय सरल गणित का उपयोग करता है। सभी ब्राउज़रों में भी ठीक काम करना चाहिए।

इस प्रदर्शन परीक्षण मामले के अनुसार यह बहुत तेज है तो अन्य समाधान यहां मिले।

(function($) {
    $.fn.textfill = function(maxFontSize) {
        maxFontSize = parseInt(maxFontSize, 10);
        return this.each(function(){
            var ourText = $("span", this),
                parent = ourText.parent(),
                maxHeight = parent.height(),
                maxWidth = parent.width(),
                fontSize = parseInt(ourText.css("fontSize"), 10),
                multiplier = maxWidth/ourText.width(),
                newSize = (fontSize*(multiplier-0.1));
            ourText.css(
                "fontSize", 
                (maxFontSize > 0 && newSize > maxFontSize) ? 
                    maxFontSize : 
                    newSize
            );
        });
    };
})(jQuery);

यदि आप योगदान करना चाहते हैं तो मैंने इसे जिस्ट में जोड़ दिया है ।

Comments

@ जॉन, धन्यवाद! आप सही कह रहे हैं कि मेरी स्क्रिप्ट कई लाइनें नहीं बनाती है, लेकिन तब ओपी ने विशेष रूप से यह नहीं पूछा कि आपकी धारणा गलत हो सकती है। इसके अलावा, इस तरह के व्यवहार से कोई मतलब नहीं होता है। मुझे लगता है कि मल्टी-लाइन समर्थन को जोड़ने का सबसे अच्छा तरीका यह होगा कि शब्दों की मात्रा के आधार पर स्ट्रिंग को विभाजित किया जाए और फिर उपरोक्त स्क्रिप्ट के साथ प्रत्येक भाग की गणना की जाए और यह सबसे अधिक संभावना होगी।

— mekwall

@ जों, मैंने मल्टीलाइन टेक्स्टफिल के साथ थोड़ा सा खेला और इस समाधान के साथ समाप्त हुआ । सैंडस्टॉर्म की विधि सबसे अधिक सटीक है, लेकिन यह तेज है;)

— मेकवॉल

यहाँ न्यूनतम फ़ॉन्ट आकार के साथ-साथ अधिकतम का एक संस्करण है: gist.github.com/1714284

— Jess Telford

@ हॉफमैन हम्म। मेरा समाधान .css("font-size")एक पाश में नहीं कहता है। आपको वह कहां से मिला? मेरा समाधान संभवत: तेज है क्योंकि आपके पास अपने प्लगइन में जोड़ा गया कोई भी फैंसी सामान नहीं है। Jsperf में अपना प्लगइन जोड़ने के लिए आपका स्वागत है और हम देखेंगे कि कौन सा सबसे तेज़ है?)

— mekwall

@MarcusEkwall ओह क्षमा करें, किसी कारण के लिए, हालांकि मैंने वहां थोड़ी देर लूप देखा। आपका दृष्टिकोण मेरे खुद के समान है और वास्तव में मेरा थोड़ा धीमा होगा क्योंकि मेरा प्लगइन कुछ अन्य सामान भी करता है (जैसे ऊंचाई और चौड़ाई दोनों को फिट करने के लिए समायोजित करना, पाठ और कुछ अन्य विकल्पों को केंद्रीकृत करता है), न कि मायने रखता है, वास्तव में धीमा हिस्सा लूप के अंदर .css फ़ंक्शन को कॉल कर रहा है।

— हॉफमैन

Answer 3

जितना मैं इस उत्तर के लिए मुझे मिलता है कभी-कभार उतने ही प्यार करता हूं (धन्यवाद!), यह वास्तव में इस समस्या का सबसे बड़ा दृष्टिकोण नहीं है। कृपया यहां कुछ अन्य अद्भुत उत्तरों की जांच करें, विशेष रूप से बिना लूपिंग के समाधान पाए गए हैं।

---

फिर भी, संदर्भ के लिए, यहां मेरा मूल उत्तर है :

<html>
<head>
<style type="text/css">
    #dynamicDiv
    {
    background: #CCCCCC;
    width: 300px;
    height: 100px;
    font-size: 64px;
    overflow: hidden;
    }
</style>

<script type="text/javascript">
    function shrink()
    {
        var textSpan = document.getElementById("dynamicSpan");
        var textDiv = document.getElementById("dynamicDiv");

        textSpan.style.fontSize = 64;

        while(textSpan.offsetHeight > textDiv.offsetHeight)
        {
            textSpan.style.fontSize = parseInt(textSpan.style.fontSize) - 1;
        }
    }
</script>

</head>
<body onload="shrink()">
    <div id="dynamicDiv"><span id="dynamicSpan">DYNAMIC FONT</span></div>
</body>
</html>

---

और यहाँ कक्षाओं के साथ एक संस्करण है :

<html>
<head>
<style type="text/css">
.dynamicDiv
{
    background: #CCCCCC;
    width: 300px;
    height: 100px;
    font-size: 64px;
    overflow: hidden;
}
</style>

<script type="text/javascript">
    function shrink()
    {
        var textDivs = document.getElementsByClassName("dynamicDiv");
        var textDivsLength = textDivs.length;

        // Loop through all of the dynamic divs on the page
        for(var i=0; i<textDivsLength; i++) {

            var textDiv = textDivs[i];

            // Loop through all of the dynamic spans within the div
            var textSpan = textDiv.getElementsByClassName("dynamicSpan")[0];

            // Use the same looping logic as before
            textSpan.style.fontSize = 64;

            while(textSpan.offsetHeight > textDiv.offsetHeight)
            {
                textSpan.style.fontSize = parseInt(textSpan.style.fontSize) - 1;
            }

        }

    }
</script>

</head>
<body onload="shrink()">
    <div class="dynamicDiv"><span class="dynamicSpan">DYNAMIC FONT</span></div>
    <div class="dynamicDiv"><span class="dynamicSpan">ANOTHER DYNAMIC FONT</span></div>
    <div class="dynamicDiv"><span class="dynamicSpan">AND YET ANOTHER DYNAMIC FONT</span></div>
</body>
</html>

Comments

मैंने पाया कि इसके साथ काम करना बेहतर offsetWidthथा, मुझे आकार के लिए एक चर भी बनाना था और फिर px को जोड़ना थाtextSpan.style.fontSize = size+"px";

— Wez

ज़रूर '+ "px"' आवश्यक है।

— बालू धम्मिका

@IdanShechter लंबी, लंबी प्रतीक्षा के लिए क्षमा करें! एक उदाहरण और जोड़ा!

— हमला

धन्यवाद, जीवन रक्षक! मुझे jQuery के बारे में पता नहीं है, इसलिए मैं आपके समाधान के साथ रहता हूं :)

— vintproykt

Answer 4

अन्य उत्तरों में से अधिकांश फॉन्ट-आकार को कम करने के लिए एक लूप का उपयोग करते हैं जब तक कि यह डिव पर फिट नहीं हो जाता है, यह बहुत ही धीमा है क्योंकि पृष्ठ को हर बार फ़ॉन्ट बदलने के बाद तत्व को फिर से प्रस्तुत करने की आवश्यकता होती है। मुझे अंततः अपने खुद के एल्गोरिथ्म को इस तरह से प्रदर्शन करने के लिए लिखना पड़ा, जिससे मुझे उपयोगकर्ता ब्राउज़र को फ्रीज किए बिना समय-समय पर इसकी सामग्री को अपडेट करने की अनुमति मिली। मैंने कुछ अन्य कार्यक्षमता (पाठ को जोड़ना, गद्दी जोड़ना) जोड़ा और इसे jQuery प्लगइन के रूप में पैक किया, आप इसे यहाँ प्राप्त कर सकते हैं:

https://github.com/DanielHoffmann/jquery-bigtext

बस फोन करो

$("#text").bigText();

और यह आपके कंटेनर पर अच्छी तरह से फिट होगा।

इसे यहां कार्रवाई में देखें:

http://danielhoffmann.github.io/jquery-bigtext/

अभी के लिए इसकी कुछ सीमाएँ हैं, div में एक निश्चित ऊँचाई और चौड़ाई होनी चाहिए और यह पाठ को कई लाइनों में लपेटने का समर्थन नहीं करता है।

मैं अधिकतम फ़ॉन्ट-आकार सेट करने के लिए एक विकल्प प्राप्त करने पर काम करूंगा।

संपादित करें: मुझे प्लगइन के साथ कुछ और समस्याएं मिली हैं, यह मानक एक के अलावा अन्य बॉक्स-मॉडल को नहीं संभालता है और div में मार्जिन या सीमाएं नहीं हो सकती हैं। मुझे इसपर काम करना होगा।

Edit2: मैंने अब उन समस्याओं और सीमाओं को तय कर दिया है और अधिक विकल्प जोड़े हैं। आप अधिकतम फ़ॉन्ट-आकार सेट कर सकते हैं और आप चौड़ाई, ऊंचाई या दोनों का उपयोग करके फ़ॉन्ट-आकार को सीमित करना चुन सकते हैं। मैं रैपर तत्व में अधिकतम-चौड़ाई और अधिकतम-ऊंचाई मानों को स्वीकार करने में काम करूंगा।

Edit3: मैंने 1.2.0 संस्करण के लिए प्लगइन को अपडेट किया है। कोड और नए विकल्प (वर्टिकल एलिन, हॉरिजॉन्टल, टेक्स्ट एलाइग) पर मेजर क्लीनअप और स्पैन टैग के अंदर आंतरिक तत्वों के लिए समर्थन (जैसे लाइन-ब्रेक या फ़ॉन्ट-भयानक आइकन।)

Comments

मैं सोच रहा हूं कि पाठ को एकाधिक पंक्ति में लपेटने का समर्थन क्यों नहीं किया गया?

— मनीष सपरिया

@ManishSapariya यह समर्थित है, लेकिन आपको मैन्युअल रूप से लाइन ब्रेक (br टैग) जोड़ने की आवश्यकता है। मेरे द्वारा स्वचालित पाठ रैप का समर्थन नहीं करने का कारण यह है कि इसे तेज़ बनाने के लिए (केवल कई बार के बजाय दो बार फ़ॉन्ट-आकार बदलें) मुझे यह धारणा बनाने की ज़रूरत है कि पाठ शब्दों के बीच नहीं लपेटेगा। जिस तरह से मेरा प्लगइन काम करता है, वह फॉन्ट-साइज़ को 1000px पर सेट करता है, फिर टेक्स्ट के कंटेनर की तुलना में टेक्स्ट के आकार के कारक को देखें, मैं फिर उसी फैक्टर द्वारा फॉन्ट-साइज़ को कम करता हूँ। सामान्य पाठ रैपिंग का समर्थन करने के लिए मुझे धीमे दृष्टिकोण (कई बार फ़ॉन्ट-आकार को कम करना) का उपयोग करना होगा जो बहुत धीमा है।

— हॉफमैन

अरे! चूंकि StackOverflow पर यहां कोई निजी संदेश नहीं है, इसलिए मुझे आपके उत्तर पर टिप्पणी करके पूछना होगा। मुझे आपका jQuery प्लगइन बहुत पसंद है, लेकिन मैं इसे मेरे लिए काम नहीं कर सकता। मैंने सही jQuery लाइब्रेरी को शामिल किया है, आपके प्लगइन को डाउनलोड किया है और इसे शामिल किया है। अब जब मैं कोशिश करता हूं और इसका इस्तेमाल करता हूं, तो कंसोल कहता है 'अनकैप्ड टाइपर: अपरिभाषित कोई फ़ंक्शन नहीं है'। क्या यह कुछ ऐसा है जिससे आप परिचित हैं? क्या आप जानते हैं कि इसे कैसे ठीक किया जाए? धन्यवाद

— गस्ट वैन डे वाल

@GustvandeWal आपको jquery लाइब्रेरी को शामिल करने के बाद प्लगइन को शामिल करने की आवश्यकता है

— हॉफमैन

मैंने किया। मुझे <script type = "text / javascript" src = " code.jquery.com/jquery-2.1.1.min.js"> बुटीक / … src" js / jquery-bigtext.js "</ script मिल गया है > ब्राउज़र मुझे सूचित नहीं करता है कि यह jQuery लाइब्रेरी या प्लगइन को लोड नहीं कर सकता है।

— Gust van de Wal

Answer 5

यह कुछ संशोधनों के साथ GeekyMonkey ऊपर पोस्ट किया गया है, पर आधारित है।

; (function($) {
/**
* Resize inner element to fit the outer element
* @author Some modifications by Sandstrom
* @author Code based on earlier works by Russ Painter ([e-mail])
* @version 0.2
*/
$.fn.textfill = function(options) {

    options = jQuery.extend({
        maxFontSize: null,
        minFontSize: 8,
        step: 1
    }, options);

    return this.each(function() {

        var innerElements = $(this).children(':visible'),
            fontSize = options.maxFontSize || innerElements.css("font-size"), // use current font-size by default
            maxHeight = $(this).height(),
            maxWidth = $(this).width(),
            innerHeight,
            innerWidth;

        do {

            innerElements.css('font-size', fontSize);

            // use the combined height of all children, eg. multiple <p> elements.
            innerHeight = $.map(innerElements, function(e) {
                return $(e).outerHeight();
            }).reduce(function(p, c) {
                return p + c;
            }, 0);

            innerWidth = innerElements.outerWidth(); // assumes that all inner elements have the same width
            fontSize = fontSize - options.step;

        } while ((innerHeight > maxHeight || innerWidth > maxWidth) && fontSize > options.minFontSize);

    });

};

})(jQuery);

Comments

अंतर यह है कि यह कई बाल तत्वों को ले सकता है, और यह ध्यान में रखता है। जावास्क्रिप्ट और सीएसएस को मिलाने से बचने के लिए फ़ॉन्ट-आकार को डिफ़ॉल्ट अधिकतम आकार के रूप में उपयोग करता है।

— सैंडस्ट्रॉम

यह बहुत अच्छा है, लेकिन मैं इसका उपयोग कैसे करूं? मैं $ ('बाहरी') करता हूं। टेक्स्टफिल (); और मुझे कोई बदलाव नहीं मिला।

— ड्रू बेकर

धन्यवाद, यह एक बहुत अच्छा कार्यान्वयन है। एक बात मैं भागा: यदि आप बहुत लंबे टेक्स्ट स्ट्रिंग्स और बहुत संकीर्ण कंटेनरों के साथ काम कर रहे हैं, तो टेक्स्ट स्ट्रिंग कंटेनर से बाहर निकल जाएगी, लेकिन आउटरविद की गणना अभी भी की जाएगी जैसे कि यह नहीं करता है। टॉस "शब्द-लपेट: ब्रेक-वर्ड;" उस कंटेनर के लिए आपके सीएसएस में, यह इस समस्या को ठीक कर देगा।

— जॉन

Answer 6

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

डिफ़ॉल्ट रूप से, 10 बाइनरी खोज चरण किए जाएंगे, जो कि इष्टतम आकार के 0.1% के भीतर मिलेगा। इसके बजाय आप इष्टतम आकार के 1/2 ^ N के भीतर प्राप्त करने के लिए कुछ मान N पर अंक निर्धारित कर सकते हैं।

इसे सीएसएस चयनकर्ता के साथ कॉल करें, जैसे: fitToParent('.title-span');

/**
 * Fit all elements matching a given CSS selector to their parent elements'
 * width and height, by adjusting the font-size attribute to be as large as
 * possible. Uses binary search.
 */
var fitToParent = function(selector) {
    var numIter = 10;  // Number of binary search iterations
    var regexp = /\d+(\.\d+)?/;
    var fontSize = function(elem) {
        var match = elem.css('font-size').match(regexp);
        var size = match == null ? 16 : parseFloat(match[0]);
        return isNaN(size) ? 16 : size;
    }
    $(selector).each(function() {
        var elem = $(this);
        var parentWidth = elem.parent().width();
        var parentHeight = elem.parent().height();
        if (elem.width() > parentWidth || elem.height() > parentHeight) {
            var maxSize = fontSize(elem), minSize = 0.1;
            for (var i = 0; i < numIter; i++) {
                var currSize = (minSize + maxSize) / 2;
                elem.css('font-size', currSize);
                if (elem.width() > parentWidth || elem.height() > parentHeight) {
                    maxSize = currSize;
                } else {
                    minSize = currSize;
                }
            }
            elem.css('font-size', minSize);
        }
    });
};

Comments

इस विकल्प से प्यार करें। मैंने इसके लिए vAlignऔर मापदंडों को जोड़ने के लिए इसे संशोधित किया है padding। vAlign == trueचयनित तत्व की लाइन-ऊँचाई को माता-पिता की ऊँचाई पर सेट करता है। पैडिंग अंतिम मान द्वारा अंतिम आकार को घटाता है। यह 5 को डिफॉल्ट करता है। मुझे लगता है कि यह वास्तव में अच्छा लग रहा है।

— डेविल्स एडवोकेट

Answer 7

मैंने AngularJS के लिए एक निर्देश बनाया है - पूरी तरह से GeekyMonkey के उत्तर से प्रेरित लेकिन jQuery की निर्भरता के बिना।

डेमो: http://plnkr.co/edit/8tPCZIjvO3VSApSeTtYr?p=preview

मार्कअप

<div class="fittext" max-font-size="50" text="Your text goes here..."></div>

आदेश

app.directive('fittext', function() {

  return {
    scope: {
      minFontSize: '@',
      maxFontSize: '@',
      text: '='
    },
    restrict: 'C',
    transclude: true,
    template: '<div ng-transclude class="textContainer" ng-bind="text"></div>',
    controller: function($scope, $element, $attrs) {
      var fontSize = $scope.maxFontSize || 50;
      var minFontSize = $scope.minFontSize || 8;

      // text container
      var textContainer = $element[0].querySelector('.textContainer');

      angular.element(textContainer).css('word-wrap', 'break-word');

      // max dimensions for text container
      var maxHeight = $element[0].offsetHeight;
      var maxWidth = $element[0].offsetWidth;

      var textContainerHeight;
      var textContainerWidth;      

      var resizeText = function(){
        do {
          // set new font size and determine resulting dimensions
          textContainer.style.fontSize = fontSize + 'px';
          textContainerHeight = textContainer.offsetHeight;
          textContainerWidth = textContainer.offsetWidth;

          // shrink font size
          var ratioHeight = Math.floor(textContainerHeight / maxHeight);
          var ratioWidth = Math.floor(textContainerWidth / maxWidth);
          var shrinkFactor = ratioHeight > ratioWidth ? ratioHeight : ratioWidth;
          fontSize -= shrinkFactor;

        } while ((textContainerHeight > maxHeight || textContainerWidth > maxWidth) && fontSize > minFontSize);        
      };

      // watch for changes to text
      $scope.$watch('text', function(newText, oldText){
        if(newText === undefined) return;

        // text was deleted
        if(oldText !== undefined && newText.length < oldText.length){
          fontSize = $scope.maxFontSize;
        }
        resizeText();
      });
    }
  };
});

Comments

इसके साथ एक समस्या मुझे यह resizeTextप्रतीत होती है कि यह ng-bindवास्तव में तत्व को पाठ को असाइन करने से पहले कहा जाता है , जिसके परिणामस्वरूप यह वर्तमान पाठ के बजाय पिछले पाठ पर आधारित है। यह उपर्युक्त डेमो में बहुत बुरा नहीं है, जहाँ इसे बार-बार उपयोगकर्ता प्रकारों के रूप में कहा जाता है, लेकिन अगर इसे एक बार नल से वास्तविक मूल्य पर जाने के रूप में कहा जाता है (एक तरह से बंधन में) तो यह अधिकतम आकार पर रहता है।

— मिरल

Answer 8

मैंने मार्कस एकवाल से ऊपर की स्क्रिप्ट को कांटा: https://gist.github.com/3945316 और अपनी प्राथमिकताओं में बदल दिया, यह अब खिड़की के आकार बदलने पर आग लग जाती है, जिससे बच्चा हमेशा अपने कंटेनर में फिट बैठता है। मैंने संदर्भ के लिए नीचे दी गई स्क्रिप्ट को चिपकाया है।

(function($) {
    $.fn.textfill = function(maxFontSize) {
        maxFontSize = parseInt(maxFontSize, 10);
        return this.each(function(){
            var ourText = $("span", this);
            function resizefont(){
                var parent = ourText.parent(),
                maxHeight = parent.height(),
                maxWidth = parent.width(),
                fontSize = parseInt(ourText.css("fontSize"), 10),
                multiplier = maxWidth/ourText.width(),
                newSize = (fontSize*(multiplier));
                ourText.css("fontSize", maxFontSize > 0 && newSize > maxFontSize ? maxFontSize : newSize );
            }
            $(window).resize(function(){
                resizefont();
            });
            resizefont();
        });
    };
})(jQuery);

Comments

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

— कोड़ी गुलडनेर

Answer 9

यहाँ ओपी के उत्तर का मेरा संशोधन है।

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

इसलिए, मेरा दृष्टिकोण सबसे अच्छा फ़ॉन्ट आकार खोजने के लिए द्विआधारी खोज का उपयोग करता है :

$.fn.textfill = function()
{
    var self = $(this);
    var parent = self.parent();

    var attr = self.attr('max-font-size');
    var maxFontSize = parseInt(attr, 10);
    var unit = attr.replace(maxFontSize, "");

    var minFontSize = parseInt(self.attr('min-font-size').replace(unit, ""));
    var fontSize = (maxFontSize + minFontSize) / 2;

    var maxHeight = parent.height();
    var maxWidth = parent.width();

    var textHeight;
    var textWidth;

    do
    {
        self.css('font-size', fontSize + unit);

        textHeight = self.height();
        textWidth = self.width();

        if(textHeight > maxHeight || textWidth > maxWidth)
        {
            maxFontSize = fontSize;
            fontSize = Math.floor((fontSize + minFontSize) / 2);
        }
        else if(textHeight < maxHeight || textWidth < maxWidth)
        {
            minFontSize = fontSize;
            fontSize = Math.floor((fontSize + maxFontSize) / 2);
        }
        else
            break;

    }
    while(maxFontSize - minFontSize > 1 && maxFontSize > minFontSize);

    self.css('font-size', fontSize + unit);

    return this;
}

function resizeText()
{
  $(".textfill").textfill();
}

$(document).ready(resizeText);
$(window).resize(resizeText);

यह तत्व को न्यूनतम और अधिकतम फ़ॉन्ट निर्दिष्ट करने की भी अनुमति देता है:

<div class="container">
    <div class="textfill" min-font-size="10px" max-font-size="72px">
        Text that will fill the container, to the best of its abilities, and it will <i>never</i> have overflow.
    </div>
</div>

इसके अलावा, यह एल्गोरिथ्म इकाई रहित है। आप निर्दिष्ट कर सकता है em, rem,% , आदि और वह अपने अंतिम परिणाम के लिए उपयोग कर सकते हैं।

यहां देखें फिडल: https://jsfiddle.net/fkhqhnqe/1/

Answer 10

मैं अपनी वेबसाइट के साथ बिल्कुल यही समस्या थी। मेरे पास एक पृष्ठ है जो प्रोजेक्टर पर, दीवारों पर, बड़ी स्क्रीन पर प्रदर्शित होता है।

जैसा कि मुझे अपने फ़ॉन्ट के अधिकतम आकार का पता नहीं है, मैंने @GeekMonkey के ऊपर दिए गए प्लगइन का फिर से उपयोग किया, लेकिन फ़ॉन्ट बढ़ाना:

$.fn.textfill = function(options) {
        var defaults = { innerTag: 'span', padding: '10' };
        var Opts = jQuery.extend(defaults, options);

        return this.each(function() {
            var ourText = $(Opts.innerTag + ':visible:first', this);
            var fontSize = parseFloat(ourText.css('font-size'),10);
            var doNotTrepass = $(this).height()-2*Opts.padding ;
            var textHeight;

            do {
                ourText.css('font-size', fontSize);
                textHeight = ourText.height();
                fontSize = fontSize + 2;
            } while (textHeight < doNotTrepass );
        });
    };

Comments

इस पृष्ठ पर केवल प्लगइन होने के लिए +1 जो वास्तव में मेरे लिए काम करता है!

— स्काईबॉन्डर्स

यह प्लगइन मेरे लिए पेज को क्रैश करता है।

— Jezen थॉमस

Answer 11

यहां स्वीकृत उत्तर का एक संस्करण है जो एक minFontSize पैरामीटर भी ले सकता है।

(function($) {
    /**
    * Resizes an inner element's font so that the inner element completely fills the outer element.
    * @author Russ Painter [e-mail]
    * @author Blake Robertson 
    * @version 0.2 -- Modified it so a min font parameter can be specified.
    *    
    * @param {Object} Options which are maxFontPixels (default=40), innerTag (default='span')
    * @return All outer elements processed
    * @example <div class='mybigdiv filltext'><span>My Text To Resize</span></div>
    */
    $.fn.textfill = function(options) {
        var defaults = {
            maxFontPixels: 40,
            minFontPixels: 10,
            innerTag: 'span'
        };
        var Opts = jQuery.extend(defaults, options);
        return this.each(function() {
            var fontSize = Opts.maxFontPixels;
            var ourText = $(Opts.innerTag + ':visible:first', this);
            var maxHeight = $(this).height();
            var maxWidth = $(this).width();
            var textHeight;
            var textWidth;
            do {
                ourText.css('font-size', fontSize);
                textHeight = ourText.height();
                textWidth = ourText.width();
                fontSize = fontSize - 1;
            } while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > Opts.minFontPixels);
        });
    };
})(jQuery);

Comments

धन्यवाद, हालांकि मुझे लगता है कि आपको उस कोड के शीर्ष पर एक अर्धविराम मिल गया है जो कि नहीं होना चाहिए

— पैट्रिक मूर

Answer 12

आप FitText.js ( github पेज) का उपयोग कर सकते हैंइस समस्या को हल करने के लिए ) का । TextFill की तुलना में वास्तव में छोटा और कुशल है। TextFill एक महंगी का उपयोग करता है जबकि लूप और FitText नहीं।

इसके अलावा FitText अधिक लचीला है (मैं इसे बहुत विशेष आवश्यकताओं के साथ एक प्रॉक्ट में उपयोग करता हूं और एक विजेता की तरह काम करता है!)।

HTML:

<div class="container">
  <h1 id="responsive_headline">Your fancy title</h1>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script>
  jQuery("#responsive_headline").fitText();
</script>

आप इसके लिए विकल्प भी सेट कर सकते हैं:

<script>
  jQuery("#responsive_headline").fitText(1, { minFontSize: '30px', maxFontSize: '90px'});
</script>

सीएसएस:

#responsive_headline {
   width: 100%;
   display: block;
}

और अगर आपको इसकी आवश्यकता है, तो FitText का भी नो- jQuery संस्करण है ।

Comments

क्या फिटटेक्स्ट ऊंचाई को ध्यान में रखता है?

— मनीष सपरिया

@ManishSapariya नहीं यह नहीं है। यह सिर्फ कंटेनर की चौड़ाई को 10 से विभाजित करता है और इसे फ़ॉन्ट-आकार के रूप में उपयोग करता है।

— दान एच।

Answer 13

EDIT: इस कोड का उपयोग HTML5 वीडियो के शीर्ष पर नोट्स दिखाने के लिए किया गया था। यह वीडियो के आकार बदलने पर (ब्राउजर विंडो के आकार बदलने पर) फॉन्ट के आकार को बदल देता है। नोट वीडियो से जुड़े थे (ठीक YouTube पर नोट की तरह), यही वजह है कि कोड DOM हैंडल के बजाय इंस्टेंस का उपयोग करता है सीधे।

अनुरोध के अनुसार मैं इसे प्राप्त करने के लिए उपयोग किए गए कुछ कोड में फेंक दूंगा। (एक HTML5 वीडियो पर पाठ बॉक्स।) कोड एक लंबे समय से पहले लिखा गया था, और मुझे लगता है कि यह बहुत गड़बड़ है। चूँकि प्रश्न पहले से ही उत्तर दिया जा चुका है और एक उत्तर पहले से ही स्वीकार किया जा चुका है। लेकिन अगर कोई इसे थोड़ा सरल करना चाहता है, तो आपका स्वागत है!

// Figure out the text size:
var text = val['text'];
var letters = text.length;
var findMultiplier = function(x) { // g(x)
    /* By analysing some functions with regression, the resulting function that
     gives the best font size with respect to the number of letters and the size
     of the note is:
     g(x) = 8.3 - 2.75x^0.15 [1 < x < 255]
     f(x) = g(letters) * (x / 1000)^0.5
     Font size = f(size)
     */
    return 8.3 - 2.75 * Math.pow(x, 0.15);
};

var findFontSize = function(x) { // f(x)
    return findMultiplier(letters) * Math.pow(x / 1000, 0.5);
};

val.setFontSizeListener = function() {
    p.style.fontSize = '1px'; // So the text should not overflow the box when measuring.
    var noteStyle = window.getComputedStyle(table);
    var width = noteStyle.getPropertyValue('width');
    var height = noteStyle.getPropertyValue('height');
    var size = width.substring(0, width.length - 2) * height.substring(0, height.length - 2);
    p.style.fontSize = findFontSize(size) + 'px';
};
window.addEventListener('resize', val.setFontSizeListener);

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

Answer 14

प्रस्तावित पुनरावृत्ति समाधानों को दो मोर्चों पर नाटकीय रूप से देखा जा सकता है:

1) 1 को जोड़ने या घटाने के बजाय, कुछ स्थिर द्वारा फ़ॉन्ट आकार को गुणा करें।

2) सबसे पहले, एक कोर्स निरंतर का उपयोग करने में शून्य, कहते हैं, प्रत्येक लूप का आकार दोगुना करें। फिर, जहां शुरू करने के लिए एक मोटे विचार के साथ, एक बेहतर समायोजन के साथ एक ही काम करें, कहते हैं, 1.1 से गुणा करें। जबकि पूर्णतावादी आदर्श फ़ॉन्ट का सटीक पूर्णांक पिक्सेल आकार चाहते हो सकता है, अधिकांश पर्यवेक्षक 100 और 110 पिक्सेल के बीच अंतर नहीं देखते हैं। यदि आप एक पूर्णतावादी हैं, तो एक भी महीन समायोजन के साथ तीसरी बार दोहराएं।

एक विशिष्ट दिनचर्या या प्लग-इन लिखने के बजाय सटीक प्रश्न का उत्तर देने के लिए, मैं सिर्फ बुनियादी विचारों पर भरोसा करता हूं और सभी प्रकार के लेआउट मुद्दों को संभालने के लिए कोड की विविधताएं लिखता हूं, न कि केवल पाठ, जिसमें फिटिंग डिव, स्पैन, चित्र शामिल हैं। .. चौड़ाई, ऊंचाई, क्षेत्रफल, ... एक कंटेनर के भीतर, एक अन्य तत्व से मेल खाते हुए ...।

यहाँ एक उदाहरण है:

  var                           nWindowH_px             = jQuery(window).height();
  var                           nWas                    = 0;
  var                           nTry                    = 5;

  do{
   nWas = nTry;
   nTry *= 2;
   jQuery('#divTitle').css('font-size' ,nTry +'px');
  }while( jQuery('#divTitle').height() < nWindowH_px );

  nTry = nWas;

  do{
   nWas = nTry;
   nTry = Math.floor( nTry * 1.1 );
   jQuery('#divTitle').css('font-size' ,nTry +'px');
  }while( nWas != nTry   &&   jQuery('#divTitle').height() < nWindowH_px );

  jQuery('#divTitle').css('font-size' ,nWas +'px');

Answer 15

यह सबसे सुंदर समाधान है जो मैंने बनाया है। यह 10 पुनरावृत्तियों कर बाइनरी खोज का उपयोग करता है। भोली तरह से कुछ समय के लिए किया गया था और जब तक कि तत्व अतिप्रवाह करने के लिए शुरू नहीं हुआ, तब तक फ़ॉन्ट का आकार 1 बढ़ा दिया गया। आप निर्धारित कर सकते एक तत्व का उपयोग कर अतिप्रवाह के लिए शुरू होता है जब element.offsetHeight और element.scrollHeight । यदि स्क्रॉलहाइट ऑफसेटहाइट से बड़ा है, तो आपके पास एक फ़ॉन्ट आकार है जो बहुत बड़ा है।

बाइनरी खोज इसके लिए एक बेहतर एल्गोरिथ्म है। यह आपके द्वारा किए जाने वाले पुनरावृत्तियों की संख्या से भी सीमित है। बस flexFont को कॉल करें और div आईडी डालें और यह 8px और 96px के बीच फ़ॉन्ट आकार को समायोजित करेगा ।

मैंने इस विषय पर शोध करने और विभिन्न पुस्तकालयों की कोशिश करने में कुछ समय बिताया है, लेकिन अंततः मुझे लगता है कि यह सबसे आसान और सबसे सरल समाधान है जो वास्तव में काम करेगा।

ध्यान दें कि यदि आप चाहते हैं कि आप इस फ़ंक्शन का उपयोग offsetWidthऔर scrollWidth, या दोनों को जोड़ सकते हैं ।

// Set the font size using overflow property and div height
function flexFont(divId) {
    var content = document.getElementById(divId);
    content.style.fontSize = determineMaxFontSize(content, 8, 96, 10, 0) + "px";
};

// Use binary search to determine font size
function determineMaxFontSize(content, min, max, iterations, lastSizeNotTooBig) {
    if (iterations === 0) {
        return lastSizeNotTooBig;
    }
    var obj = fontSizeTooBig(content, min, lastSizeNotTooBig);

    // if `min` too big {....min.....max.....}
    // search between (avg(min, lastSizeTooSmall)), min)
    // if `min` too small, search between (avg(min,max), max)
    // keep track of iterations, and the last font size that was not too big
    if (obj.tooBig) {
        (lastSizeTooSmall === -1) ?
            determineMaxFontSize(content, min / 2, min, iterations - 1, obj.lastSizeNotTooBig, lastSizeTooSmall) :
                determineMaxFontSize(content, (min + lastSizeTooSmall) / 2, min, iterations - 1, obj.lastSizeNotTooBig, lastSizeTooSmall);

    } else {
        determineMaxFontSize(content, (min + max) / 2, max, iterations - 1, obj.lastSizeNotTooBig, min);
    }
}

// determine if fontSize is too big based on scrollHeight and offsetHeight, 
// keep track of last value that did not overflow
function fontSizeTooBig(content, fontSize, lastSizeNotTooBig) {
    content.style.fontSize = fontSize + "px";
    var tooBig = content.scrollHeight > content.offsetHeight;
    return {
        tooBig: tooBig,
        lastSizeNotTooBig: tooBig ? lastSizeNotTooBig : fontSize
    };
}

Comments

धन्यवाद, यह बहुत अच्छा लग रहा है! मुझे बस मिल रहा है ReferenceError: lastSizeTooSmall is not defined। हो सकता है कि इसे कहीं परिभाषित किया जाए?

— ndbroadbent

Answer 16

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

https://codepen.io/ThePostModernPlatonic/pen/BZKzVR

यह उदाहरण केवल ऊंचाई के लिए है, हो सकता है कि आपको चौड़ाई के बारे में कुछ डालने की आवश्यकता हो।

इसका आकार बदलने का प्रयास करें

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
<style>
</style>
</head>
<body>
<div style="height:100vh;background-color: tomato;" id="wrap">        
  <h1 class="quote" id="quotee" style="padding-top: 56px">Because too much "light" doesn't <em>illuminate</em> our paths and warm us, it only blinds and burns us.</h1>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  var multiplexador = 3;
  initial_div_height = document.getElementById ("wrap").scrollHeight;
  setInterval(function(){ 
    var div = document.getElementById ("wrap");
    var frase = document.getElementById ("quotee");
    var message = "WIDTH div " + div.scrollWidth + "px. "+ frase.scrollWidth+"px. frase \n";
    message += "HEIGHT div " + initial_div_height + "px. "+ frase.scrollHeight+"px. frase \n";           
    if (frase.scrollHeight < initial_div_height - 30){
      multiplexador += 1;
      $("#quotee").css("font-size", multiplexador); 
    }
    console.log(message);          
  }, 10);
</script>
</html>

Answer 17

मुझे अच्छा लगा

let name = "Making statements based on opinion; back them up with references or personal experience."
let originFontSize = 15;
let maxDisplayCharInLine = 50; 
let fontSize = Math.min(originFontSize, originFontSize / (name.length / maxDisplayCharInLine));

Answer 18

बस मेरे संस्करण को contenteditables के लिए जोड़ना चाहता था।

$.fn.fitInText = function() {
  this.each(function() {

    let textbox = $(this);
    let textboxNode = this;

    let mutationCallback = function(mutationsList, observer) {
      if (observer) {
        observer.disconnect();
      }
      textbox.css('font-size', 0);
      let desiredHeight = textbox.css('height');
      for (i = 12; i < 50; i++) {
        textbox.css('font-size', i);
        if (textbox.css('height') > desiredHeight) {
          textbox.css('font-size', i - 1);
          break;
        }
      }

      var config = {
        attributes: true,
        childList: true,
        subtree: true,
        characterData: true
      };
      let newobserver = new MutationObserver(mutationCallback);
      newobserver.observe(textboxNode, config);

    };

    mutationCallback();

  });
}

$('#inner').fitInText();

#outer {
  display: table;
  width: 100%;
}

#inner {
  border: 1px solid black;
  height: 170px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  word-break: break-all;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="outer">
  <div id="inner" contenteditable=true>
    TEST
  </div>
</div>

Answer 19

मुझे पाठ को सिकोड़ने के लिए लूप के उपयोग को रोकने का एक तरीका मिल गया है। यह कंटेनर की चौड़ाई और सामग्री की चौड़ाई के बीच की दर से गुणा करके फ़ॉन्ट-आकार को समायोजित करता है। इसलिए यदि कंटेनर की चौड़ाई सामग्री का 1/3 है, तो फ़ॉन्ट-आकार 1/3 से कम हो जाएगा और कंटेनर की चौड़ाई बढ़ जाएगी। स्केल करने के लिए, मैंने थोड़ी देर के लूप का उपयोग किया है, जब तक कि सामग्री कंटेनर से बड़ी न हो।

function fitText(outputSelector){
    // max font size in pixels
    const maxFontSize = 50;
    // get the DOM output element by its selector
    let outputDiv = document.getElementById(outputSelector);
    // get element's width
    let width = outputDiv.clientWidth;
    // get content's width
    let contentWidth = outputDiv.scrollWidth;
    // get fontSize
    let fontSize = parseInt(window.getComputedStyle(outputDiv, null).getPropertyValue('font-size'),10);
    // if content's width is bigger than elements width - overflow
    if (contentWidth > width){
        fontSize = Math.ceil(fontSize * width/contentWidth,10);
        fontSize =  fontSize > maxFontSize  ? fontSize = maxFontSize  : fontSize - 1;
        outputDiv.style.fontSize = fontSize+'px';   
    }else{
        // content is smaller than width... let's resize in 1 px until it fits 
        while (contentWidth === width && fontSize < maxFontSize){
            fontSize = Math.ceil(fontSize) + 1;
            fontSize = fontSize > maxFontSize  ? fontSize = maxFontSize  : fontSize;
            outputDiv.style.fontSize = fontSize+'px';   
            // update widths
            width = outputDiv.clientWidth;
            contentWidth = outputDiv.scrollWidth;
            if (contentWidth > width){
                outputDiv.style.fontSize = fontSize-1+'px'; 
            }
        }
    }
}

यह कोड एक परीक्षण का हिस्सा है जिसे मैंने Github https://github.com/ricardobrg/fitText/ पर अपलोड किया है

Answer 20

मैं geekMonkey समाधान के साथ गया था, लेकिन यह बहुत धीमा है। वह क्या करता है, क्या वह फ़ॉन्ट आकार को अधिकतम (maxFontPixels) में समायोजित करता है और फिर जांचता है कि यह कंटेनर के अंदर फिट बैठता है या नहीं। अन्यथा यह फ़ॉन्ट का आकार 1px कम करता है और फिर से जाँच करता है। बस ऊंचाई के लिए पिछले कंटेनर की जांच क्यों न करें और उस मूल्य को जमा करें? (हाँ, मुझे पता है क्यों, लेकिन मैंने अब एक समाधान बनाया है, जो केवल ऊंचाई पर काम करता है और इसमें एक मिन / अधिकतम विकल्प भी है)

यहाँ एक बहुत जल्दी समाधान है:

var index_letters_resize;
(index_letters_resize = function() {
  $(".textfill").each(function() {
    var
      $this = $(this),
      height = Math.min( Math.max( parseInt( $this.height() ), 40 ), 150 );
    $this.find(".size-adjust").css({
      fontSize: height
    });
  });
}).call();

$(window).on('resize', function() {
  index_letters_resize();
);

और यह HTML होगा:

<div class="textfill">
  <span class="size-adjust">adjusted element</span>
  other variable stuff that defines the container size
</div>

दोबारा: यह समाधान केवल कंटेनर की ऊंचाई के लिए जाँच करता है। इसलिए इस फ़ंक्शन को जांचना नहीं है, अगर तत्व अंदर फिट बैठता है। लेकिन मैंने एक न्यूनतम / अधिकतम मूल्य (40min, 150max) भी लागू किया है, इसलिए मेरे लिए यह पूरी तरह से ठीक काम करता है (और विंडो रिज पर भी काम करता है)।

Answer 21

यहाँ इस समाधान का एक और संस्करण है:

shrinkTextInElement : function(el, minFontSizePx) {
    if(!minFontSizePx) {
        minFontSizePx = 5;
    }
    while(el.offsetWidth > el.parentNode.offsetWidth || el.offsetHeight > el.parentNode.offsetHeight) {

        var newFontSize = (parseInt(el.style.fontSize, 10) - 3);
        if(newFontSize <= minFontSizePx) {
            break;
        }

        el.style.fontSize = newFontSize + "px";
    }
}