Redimensionar texto dinámicamente para llenar div

He estado buscando una solución para cambiar el tamaño del tamaño del texto en un div para hacer que el texto complete todo el alto y ancho del div, sin resultado.Redimensionar texto dinámicamente para llenar div

me han hecho algunas imágenes para ayudar a entender este problema: Div 1

Así que este es un div simple con una altura y anchura del conjunto. Este alto y ancho no cambia, ¡el texto en el cuadro sí lo hace! Entonces, lo que quiero hacer es hacer que ese texto llene todo el ancho y alto de la div como en la imagen de abajo.

Div 2

he estado trabajando en el simple ejemplo de abajo y yo simplemente no puede encontrar la manera de hacer esto. He intentado configurar tamaños de fuente relativos con porcentaje, haciendo cosas con desbordamiento, alineando texto, no obteniendo el resultado que quiero.

<html> 
    <head> 
     <title>Test</title> 
     <style type="text/css"> 
      #box1, #box2{ 
       width: 400px; 
       height: 300px; 
       color: white; 
       margin: 10; 
       font-size:larger; 
       text-align:justify; 
       letter-spacing: 100%; 
      } 

      #box1 { background-color: green;} 
      #box2 { background-color: blue;} 
     </style> 
    </head> 

    <body> 
     <div id="box1"> 
      Llorem ipsum foo bar baz 
     </div> 
     <div id="box2"> 
      Foobar 
     </div> 
    </body> 
</html>

Es este problema incluso solucionable con una simple CSS o voy a tener que hacer un poco de Javascript/jQuery?

Fuente

2010-12-06 Cheesebaron

Como ya he dicho esto puede ser una víctima de

Auto-size dynamic text to fill fixed size container.

El PO realizó un jQuery plugin para ese medio, puede descargarlo here

No parece que hasta la fecha, aunque !

¡Buena suerte!

Fuente

2010-12-06 21:25:53 Trufa

Sí, esta parece ser la solución al problema, al parecer funciona con Chrome, al menos, tendrá que probar en otros navegadores también. – Cheesebaron

Buena suerte, yo también soy chrome, así que no puedo ayudarte. ¡Dígame si tiene algún problema para implementar! – Trufa

enlaces están rotos.pegue el código directamente – ngb

Supongo que este no es el tipo de cosas que puedes hacer con CSS. No hay ningún tipo de noción de porcentaje en fuentes (hasta donde yo sé). Probablemente necesitarás usar Javascript.

Fuente

2010-12-06 21:15:22 warriorpostman

Porcentaje en fuentes es posible. El 100% será el tamaño definido en la configuración de su navegador, todo lo que esté por encima o por debajo del 100% cambiará de tamaño de acuerdo con ese tamaño de fuente. – Cheesebaron

Puede usar FitText.js (github page) para resolver este problema. Es realmente pequeño y eficiente en comparación con TextFill. TextFill utiliza un ciclo while costoso y FitText no.

También FitText es más flexible (¡lo uso en un proyecto con requisitos muy especiales y funciona como un campeón!).

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>

También puede configurar opciones para ello:

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

CSS:

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

Y si lo necesita, FitText también tiene un no-jQuery version.

Fuente

2013-09-20 08:06:21 eduludi

Esto no es lo que solicitó el solicitante. FitText simplemente permite un cambio de tamaño basado en la relación; el solicitante pidió que se redimensione el texto para que rellene por completo el div (como en, no se podía aumentar el tamaño de letra: más sin que los caracteres salgan del div). –

Redimensionar texto dinámicamente para llenar div

Respuesta

Cuestiones relacionadas