div

Question

के आकार के अनुसार फ़ॉन्ट आकार परिवर्तन है मेरे पास पाठ के साथ div एक resisable है। मैं पाठ को div परिवर्तन आकार के रूप में स्केल करना चाहता हूं।

विशेष रूप से, मैं चाहता हूं कि टेक्स्ट का सबसे बड़ा संभव फ़ॉन्ट आकार हो जो इसे div के अंदर फिट कर देगा।

Answer 1

उपयोग FitText http://fittextjs.com/

Answer 2

आप इस तरह की कोशिश कर सकते हैं:

आप ऊंचाई को समायोजित करना चाहते हैं, ऑटो को ऊंचाई की स्थापना

$("#sample").modal({ 
containerCss:{ 
    backgroundColor:"#fff", 
    borderColor:"#0063dc", 
    height:450, 
    padding:0, 
    width:830 
} 
}); 

Answer 3

मैं this plugin का उपयोग है कि मैं के आधार पर किया कोशिश fitText.js, क्योंकि fitText मेरी ज़रूरतों को पूरा नहीं करता है, क्योंकि मुझे आकार बदलने के लिए तारों की लंबाई नहीं पता है, इसलिए फिटटेक्स्ट का फ़िक्स आकार बदलें पैरामीटर सभी मामलों में काम नहीं करता है। न्यूनतम फ़ॉन्ट आकार को सीमित करने के पूर्णांक संख्या: अधिकतम फ़ॉन्ट आकार इसके परिभाषित आकार के लिए सीएसएस में

MIN_SIZE सीमित करने के लिए बूलियन:

• set_max_size:

  $.fn.adjustTextSize = function (set_max_size, min_size) { 
      min_size = min_size || 12; // if no value then set a default one 
      var string, width, line, initFontSize, returnFontSize, ratio; 
  
      return this.each(function() { 
       // Store the object 
       var $this = $(this); 
  
       var resizer = function() { 
        string = $this; 
        string.html('<span style="white-space: nowrap;">' + string.html() + '</span>'); 
  
        width = string.width(); 
        line = $(string.children('span')); 
        initFontSize = parseInt(string.css('font-size')); 
        ratio = width/line.width(); 
  
        returnFontSize = initFontSize*ratio; 
  
        if (set_max_size && returnFontSize > initFontSize) { 
         returnFontSize = initFontSize; 
        } 
  
        if (min_size && returnFontSize < min_size) { 
         returnFontSize = min_size; 
        } 
  
        string.css('font-size',returnFontSize); 
        while (line.width() >= width) { 
         if (min_size && returnFontSize <= min_size) { 
          string.html(line.html()); 
          return false; 
         } 
         string.css('font-size', --returnFontSize); 
        } 
        string.html(line.html()); 
       } 
  
       // Call once to set. 
       resizer(); 
  
       // Call on resize. Opera debounces their resize by default. 
       $(window).on('resize orientationchange', resizer); 
      }); 
  }; 
  $('.js-adjust-text').adjustTextSize(false, 12); 
  $('.js-adjust-text-limit').adjustTextSize(true, 30); 
  

  इस प्लगइन दो पैरामीटर मिलता है।

मुझे आशा है कि यह आपके मामले के लिए काम करेगा।

Answer 4

ऊपर एक छोटा सा कोड है, क्योंकि यह कंटेनर की चौड़ाई पाने के लिए है जिसे मैंने ऊँचा कंटेनर समायोजन के लिए संपादित किया है।

$.fn.adjustTextSize = function (set_max_size, min_size) { 

    min_size = min_size || 12; // if no value then set a default one 
    var string, height, line, initFontSize, returnFontSize, ratio; 

    return this.each(function() { 
     // Store the object 
     var $this = $(this); 

     var resizer = function() { 
      string = $this; 
      string.html('<span>' + string.html() + '</span>'); 

      height = string.height(); 
      line = $(string.children('span')); 
      initFontSize = parseInt(string.css('font-size')); 
      ratio = height/line.height(); 

      returnFontSize = (initFontSize*ratio) ; 

      if (set_max_size && returnFontSize > initFontSize) { 
       returnFontSize = initFontSize; 
      } 

      if (min_size && returnFontSize < min_size) { 
       returnFontSize = min_size; 
      } 

      string.css('font-size',returnFontSize); 
      while (line.height() >= height) { 
       if (min_size && returnFontSize <= min_size) { 
        string.html(line.html()); 
        return false; 
       } 
       string.css('font-size', --returnFontSize); 
      } 
      string.html(line.html()); 
     } 

     // Call once to set. 
     resizer(); 

     // Call on resize. Opera debounces their resize by default. 
     $(window).on('resize orientationchange', resizer); 
    }); 
}; 

आशा है कि यह उपयोगी