Ha cambiado el tamaño de fuente de acuerdo con el tamaño de div

Question

Tengo un div resisable con texto dentro. Quiero que el texto se escale ya que el div cambia de tamaño.

Específicamente, quiero que el texto tenga el tamaño de fuente más grande posible que lo ajuste dentro del div.

Answer 1

Uso FitText http://fittextjs.com/

Answer 2

Usted puede tratar de esta manera:

Si desea que la altura para ajustar, intente ajustar la altura de auto

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

Answer 3

utilizo this plugin que hace en base a fitText.js, porque fitText no se ajusta a mis necesidades, debido a que no sé la longitud de las cadenas para cambiar el tamaño, por lo que el parámetro de ajuste de tamaño de fitText no funciona en todos los casos.

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

Este plugin obtener dos parámetros:

• set_max_size: booleanas para limitar el tamaño máximo de la fuente a su tamaño definido en CSS
• min_size: Número entero para limitar el tamaño de fuente mínimo.

Espero que funcione para su caso.

Answer 4

aquí hay un pequeño código modificado anteriormente, porque es para obtener el ancho del contenedor que he editado para el ajuste del contenedor alto.

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

Esperamos que le útil