javascript - suspensivos - Redimensionar dinámicamente el texto según el ancho del contenedor

text-overflow

Question

Estoy trabajando en un diseño receptivo y tengo algunas etiquetas de visualización <h3> que me gustaría reducir cuando se reduce el ancho de la ventana del navegador.

La configuración inicial, basada en un ancho de 960px:

1. El tamaño de fuente del cuerpo está establecido en 14 píxeles
2. El tamaño de fuente de la etiqueta h3 es 40 px
3. El ancho del div que contiene es 230px

Así que esto es lo que hice para javascript / jQuery:

$(window).resize(function(){
    var containerSize = $(''.container'').width();
    var textPercentage = 0.17391304347826086956521739130435; /* 40/230 */
    var textRatio = containerSize * textPercentage;
    var textEms = textRatio / 14;

    $(''.container h3'').css(fontSize,textEms+"em");
});

Mis habilidades como javscript son obviamente bastante limitadas, así que esperaba que pudieras ayudarme a tener todo esto en orden y funcionando correctamente. Creo que la función $(window).resize es el evento incorrecto que se debe usar, ya que el texto debe redimensionarse automáticamente al cargar la página, no solo en el tamaño de la ventana.

Gracias de antemano por la ayuda!

Nota: No quiero que el texto se extienda a los bordes de los contenedores, por lo que no estoy usando FitText.js o BigText.js.

Answer 1

Podrías probar esto.

$(window).resize(function(){
    var containerSize = $(''.container'').width();
    var textPercentage = 0.17391304347826086956521739130435; /* 40/230 */
    var textRatio = containerSize * textPercentage;
    var textEms = textRatio / 14;

    //fontSize should be enclosed in quotes
    $(''.container h3'').css(''fontSize'', textEms+"em");
})
.resize();//Triggers the resize on page load to set the font size

Answer 2

window.resize es el evento correcto, pero no se window.resize en la carga de la página. Sin embargo, solo puede agregar .trigger(''resize'') a su código para hacer que se .trigger(''resize'') en la página de carga:

$(window).bind(''resize'', function(){
    var containerSize  = $(''.container'').width(),
        textPercentage = 0.17391304347826086956521739130435, /* 40/230 */
        textRatio      = containerSize * textPercentage,
        textEms        = textRatio / 14;

    $(''.container h3'').css(fontSize, textEms+"em");
}).trigger(''resize'');

Tendrá que ejecutar este código después de document.ready para asegurarse de que el ancho que está obteniendo para el contenedor es correcto. También puede colocar este código en la parte inferior de su documento HTML (que debe hacer con o sin el controlador de eventos document.ready ) que garantizará que los elementos estén disponibles cuando ejecute este código:

//wait for `document.ready` to fire
$(function () {

    //cache the .container and H3 elements
    var $container = $(''.container''),
        $h3        = $container.find(''h3'');

    //bind event handler to `window.resize`
    $(window).bind(''resize'', function(){

        //get the width of the container
        var containerSize  = $container.width(),
            textPercentage = 0.17391304347826086956521739130435, /* 40/230 */
            textRatio      = containerSize * textPercentage,
            textEms        = textRatio / 14;

        $h3.css(''fontSize'', textEms+"em");
    }).trigger(''resize'');
});

Tenga en cuenta que guardé en caché los elementos H3 para que no tengan que seleccionarse cada evento de resize , porque cuando realmente cambia el tamaño de su navegador, hay toneladas de estos eventos que se disparan.

Answer 3

Para las personas que encuentran esto al buscar en Google algo como ''tamaño de fuente receptivo'', esto podría ser de ayuda:

https://github.com/davatron5000/FitText.js

Es un plugin de jQuery que establece un tamaño de fuente basado en el ancho de su contenedor. También tiene algunas opciones para obtener los resultados deseados.

PD: Por supuesto, también escala el texto cuando la ventana se cambia de tamaño.