¿Cómo adaptar el tamaño de fuente a div-size?

Question

Hay un div con una altura fija de & de ancho. Este div contiene contenido dinámico, contenido de texto. Si el texto es demasiado largo, "explotará" el div. Y cuando el texto sea demasiado corto, el div parecerá un poco vacío.

Así que mi conclusión sería hacer la fuente más grande cuando el texto es corto y más pequeño cuando el texto es largo.

Nunca lo intenté, ¿cómo lograr esto?

€: como ya estoy usando dojo como js framework incluyendo jquery o cualquier otro framework no es una opción. Por supuesto, todavía gracias por las respuestas.

Answer 1

Crea otro elemento dentro de tu DIV y agrega el texto.

Divida el ancho de su DIV por el elemento, multiplique por 100 y obtenga el valor de porcentaje para el tamaño de fuente css.

Tendrás que jugar con el tamaño de fuente en tu DIV exterior para obtener el ajuste correcto.

Answer 2

jQuery es probablemente la opción más fácil aquí. Puede usar la función css para cambiar el font-size del cuadro si el height es más alto que un cierto valor? Eche un vistazo a this fiddle (que he probado en Chrome).

$(function() { 
    $('.text').each(function() { 
     if($(this).height() > 30) 
      $(this).css('font-size', '12px'); 
    }); 
}); 

Answer 3

Usted puede hacer esto con javascript utilizando string.length para obtener la longitud de la cadena, y luego el css jquery() para establecer el tamaño dinámicamente (http://api.jquery.com/css /). O si puede hacer algunas secuencias de comandos en el servidor con su configuración, puede establecer el tamaño con un estilo en línea antes de que se cargue la página. The jquery .css method is here

edición: Después de su edición re dojo, puede utilizar el mismo método básico, pero simplemente configure el tamaño de la fuente utilizando los métodos dojo en lugar de los jquery. This tutorial parece útil.

Answer 4

Existen numerosos complementos que pueden ser sustituibles para esto. Uno de ellos here.

Answer 5

es posible con jQuery

$(document).ready(function() { 
var originalFontSize = 12; 
var sectionWidth = $('...').width(); 
$('...').each(function(){ 
var spanWidth = $(this).width(); 
var newFontSize = (sectionWidth/spanWidth) * originalFontSize; 
$(this).css({"font-size" : newFontSize, "line-height" : newFontSize/1.2 + "px"}); 
}); 
}); 

Espero que esto ayudó! posteo un poco la misma pregunta y el moderador dijo que es una pregunta fuera del tema :)