Sono cambiate le dimensioni del carattere in base alla dimensione del div

Question

Ho un resisable div con testo all'interno. Voglio che il testo venga ridimensionato poiché la dimensione di div cambia.

In particolare, desidero che il testo abbia la dimensione di carattere più grande possibile che lo adatti allo div.

Answer 1

Usa FitText http://fittextjs.com/

Answer 2

Si può provare in questo modo:

Se si desidera che l'altezza per regolare, provare a impostare l'altezza su auto

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

Answer 3

Io uso this plugin che ho fatta sulla base di fitText.js, perché fitText non si adatta alle mie esigenze, perché non conosco la lunghezza delle stringhe da ridimensionare, quindi il parametro di ridimensionamento della correzione di fitText non funziona in tutti i casi.

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

Questo plugin ottenere due parametri:

• set_max_size: booleane per limitare dimensione massima del carattere alla sua dimensione definita nei CSS
• min_size: numero intero di limitare dimensione minima dei caratteri.

Spero che funzioni per il tuo caso.

Answer 4

qui è un po 'cambiato codice sopra, perché è per ottenere la larghezza del contenitore che ho fatto modificare per la regolazione del contenitore di altezza.

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

speranza che utile