दिलचस्प पोस्ट
उद्देश्य सी के बजाय कोको के साथ सी ++ का उपयोग करें? Json सरणी के माध्यम से जावास्क्रिप्ट पाश? UI तालिका दृश्य सेल के अंदर बटन क्लिक करें SQL सर्वर अनुक्रमणिका – आरोही या अवरोही, यह क्या अंतर करता है? PHP के माध्यम से MySQL डाटाबेस आउटपुट प्राप्त करें क्या जावास्क्रिप्ट का उपयोग कर फ़ायरफ़ॉक्स, सफारी और क्रोम में क्लिपबोर्ड को पढ़ना संभव है? WPF blurry फोंट मुद्दा- समाधान क्या वेब साइट्स को वास्तव में ब्राउज़रों के लिए पूरा करने की आवश्यकता है जिनके पास जावास्क्रिप्ट सक्षम नहीं है? एंड्रॉइड स्टूडियो त्रुटि org.gradle.process.internal.ExecException के साथ डिबग करने में विफल रहता है मैन्युअल रूप से एक एन्कोडिंग को निर्दिष्ट किए बिना मैं सी # में स्ट्रिंग्स का संगत बाइट प्रतिनिधित्व कैसे प्राप्त करूं? जॉन कार्माक का असामान्य फास्ट व्यस्त वर्ग रूट (भूकंप III) जावास्क्रिप्ट में एक मैट्रिक्स के कॉलम (ट्रांसेसिटी) के साथ पंक्तियों को स्वैप करें आज्ञाओं पर git डिफ़ॉल्ट झंडे सेट करना सूची <ऑब्जेक्ट> सूची <MyClass> को कैसे डालना अलामफिर से मूल्य कैसे लौटाया जाए

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

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

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

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

वेब के समाधान से एकत्रित समाधान "निश्चित आकार के कंटेनर को भरने के लिए ऑटो-आकार डायनामिक टेक्स्ट"

धन्यवाद आक्रमण मैं 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 प्लगइन है, इसलिए यह संभवतः उतना अच्छा नहीं है जितना कि यह होना चाहिए। निश्चित रूप से संकेतक स्वागत करते हैं

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

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

 (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); 

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

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

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

बस कॉल करें

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

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

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

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

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

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

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

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

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

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


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

 <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> 

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

 ; (function($) { /** * Resize inner element to fit the outer element * @author Some modifications by Sandstrom * @author Code based on earlier works by Russ Painter (WebDesign@GeekyMonkey.com) * @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); 

मैंने 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(); }); } }; }); 

मैंने माक्र्स एकवाल से ऊपर लिखी स्क्रिप्ट को खारिज कर दिया: 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); 

यहां ओपी के जवाब में मेरा संशोधन है

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

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

 $.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/

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

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

इसे सीएसएस चयनकर्ता के साथ बुलाओ, जैसे: 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); } }); }; 

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

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

 $.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 ); }); }; 

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

 (function($) { /** * Resizes an inner element's font so that the inner element completely fills the outer element. * @author Russ Painter WebDesign@GeekyMonkey.com * @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); 

आप इस समस्या को हल करने के लिए FitText.js ( github पृष्ठ ) का उपयोग कर सकते हैं। टेक्स्टफिल की तुलना में वास्तव में छोटा और कुशल है टेक्स्टफ़ाइल एक महंगे का उपयोग करता है, जबकि लूप और 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 संस्करण नहीं है ।

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

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

 // 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); 

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

प्रस्तावित चलने वाले समाधानों को नाटकीय रूप से दो मोर्चों पर बढ़ाया जा सकता है:

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'); 

मैं जानता हूँ कि यह एक पुराना है, लेकिन वहां अभी भी लोग हैं जो इस कार्यक्षमता की आवश्यकता है मैं 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(); ); 

और यह एचटीएमएल होगा:

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

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

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

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> 

यहां इस समाधान का दूसरा संस्करण है:

 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"; } }