Mi solución es llamar a una función en javascript cuando se cargue el texto dinámico donde, al introducir el texto y el tamaño del div, la propiedad font-size dependa del tamaño de dicho div.
Para ello se crea una capa, la cual no ha de ser visible al usuario, con propiedades absolute, top: -500px; left:-500px; la razón por la cual se crea con esas propiedades es porque, como he dicho antes, no puede ser visible pero sí que debe estar visible para el documento ya que habrá que leer sus propiedades, si en vez de hacerlo así creáramos una capa en display: none; no se podría leer su tamaño debido a que está oculta.
Nótese que se trabaja con jquery el cual habrá que incluir en la página.
En el código se entiende mejor:
function sizetext (texto,w,h) { //la capa #pretext la hacemos visible $("#pretext").css("display", "block"); //le damos el ancho que queramos que ocupe el texto $("#pretext").css("width", w); //generamos nuestro texto dentro de la capa $("#pretext").html(texto); //hacemos un for desde tamaño de letra 30 ya que, en mi caso //el div no será tan grande y el texto tan pequeño para //tener una letra más grande que 30px for (i=30;i>0;i--) { //añadimos en la propiedad font-size el tamaño de la variable "i" $("#pretext").css("font-size", i); //sacamos ancho y alto del nuevo div generado pw = $("#pretext").width(); ph = $("#pretext").height(); //como en la quinta línea ya le dimos el ancho al cual //se tendría que ajustar, solo queda comprobar el alto if (ph <= h) { //yo hago un alert pero bien podría ser un return i; //para devolver el tamaño de la letra alert(i); //salimos del bucle for break; } } //para evitar posibles errores en css ocultamos la capa //ya que solo nos sirve para determinar el tamaño $("#pretext").css("display", "none"); } //llamamos a la función... sizetext(texto, tamaño_div_ancho, tamaño_div_alto);
Ahora solo queda incluir dentro del body el div:
<div id="pretext" style="position:absolute; z-index:0; top: -500px; height: -500px; display: none;"></div>
Cualquier duda o sugerencia será bien recibida en los comentarios.
Excelente Aporte amigo.
ResponderEliminarGracias !!