¿Cómo se puede ajustar el tamaño de un texto al espacio disponible en un elemento HTML?

Quiero mostrar en un <div> de tamaño fijo el texto introducido por el usuario. Lo que quiero es ajustar el tamaño de letra del texto automáticamente para que se ajuste al tamaño disponible.

Si por ejemplo el <div> es de 400px x 300px y el usuario escribe el texto ABC, entonces se tiene que ver con un tamaño de letra enorme. Pero si el usuario escribe un párrafo, entonces el tamaño de letra tiene que ser diminuto porque el espacio disponible es el miso que antes.

La idea sería empezar con un tamaño de letra grande (por ejemplo 32px) y después ir reduciéndolo a medida que el texto se haga más largo. ¿Alguna idea de cómo conseguirlo?

Estás leyendo una traducción autorizada de la pregunta Auto-size dynamic text to fill fixed size container planteada por GeekyMonkey en StackOverflow.

Respuestas

Para hacer lo que quieres, puedes utilizar el plugin textfill de jQuery:

;(function($) {
    $.fn.textfill = function(options) {
        var fontSize = options.maxFontPixels;
        var ourText = $('span:visible:first', this);
        var maxHeight = $(this).height();
        var maxWidth = $(this).width();
        var textHeight;
        var textWidth;
        do {
            ourText.css('font-size', fontSize);
            textHeight = ourText.height();
            textWidth = ourText.width();
            fontSize = fontSize - 1;
        } while ((textHeight > maxHeight || textWidth > maxWidth) &amp;&amp; fontSize > 3);
        return this;
    }
})(jQuery);

Este es un ejemplo de cómo utilizarlo en tu página:

<script type="text/javascript">
    $(document).ready(function() {
        $('.jtextfill').textfill({ maxFontPixels: 36 });
    });
</script>
 
<div class='jtextfill' style='width:100px; height:50px;'>
    <span>Texto de relleno</span>
</div>

@librosweb

9 octubre 2014, 22:51