letra - CSS puro para que el tamaño de fuente sea sensible en función de la cantidad dinámica de caracteres

tamaño de letra html

Question

Sé que esto podría resolverse con bastante facilidad con Javascript, pero solo me interesa una solución CSS pura.

Quiero una forma de redimensionar dinámicamente el texto para que siempre se ajuste a un div fijo. Aquí está el marcado de muestra:

<div style="width: 200px; height: 1em; overflow: hidden;">
  <p>Some sample dynamic amount of text here</p>
</div>

Estaba pensando que tal vez esto podría ser posible especificando el ancho del contenedor en ems, y obteniendo el tamaño de fuente para heredar ese valor?

Answer 1

Acabo de descubrir que esto es posible utilizando unidades VW. Son las unidades asociadas con la configuración del ancho de la ventana gráfica. Hay algunos inconvenientes, como la falta de compatibilidad con el navegador heredado, pero definitivamente es algo que se debe considerar seriamente usar. Además, aún puede proporcionar recursos alternativos para navegadores más antiguos como:

p {
    font-size: 30px;
    font-size: 3.5vw;
}

http://css-tricks.com/viewport-sized-typography/ y https://medium.com/design-ux/66bddb327bb1

Answer 2

Como muchos mencionaron en los comentarios a la publicación de @ DMTinter, el OP preguntaba sobre el número ("cantidad") de cambio de caracteres. También estaba preguntando sobre CSS, pero como @Alexander indicó, "no es posible solo con CSS". Por lo que puedo decir, eso parece ser cierto en este momento, así que también parece lógico que la gente quiera saber cuál es la mejor opción.

No estoy particularmente orgulloso de esto, pero funciona. Parece una cantidad excesiva de código para lograrlo. Este es el núcleo:

function fitText(el){
  var text = el.text();
  var fsize = parseInt(el.css(''font-size''));
  var measured = measureText(text, fsize);

  if (measured.width > el.width()){
    console.log(''reducing'');
    while(true){
      fsize = parseInt(el.css(''font-size''));
      var m = measureText(text, fsize );
      if(m.width > el.width()){
        el.css(''font-size'', --fsize + ''px'');
      }
      else{
        break;
      }
    }
  }
  else if (measured.width < el.width()){
    console.log(''increasing'');
    while(true){
      fsize = parseInt(el.css(''font-size''));
      var m = measureText(text, fsize);
      if(m.width < el.width()-4){ // not sure why -4 is needed (often)
        el.css(''font-size'', ++fsize + ''px'');
      }
      else{
        break;
      }
    }
  }
}

Aquí hay una bandeja de JS: http://jsbin.com/pidavon/edit?html,css,js,console,output
Por favor, sugiera posibles mejoras (no estoy realmente interesado en usar lienzo para medir el texto ... parece una sobrecarga (?)).

Gracias a @Pete por la función measureText: https://.com/a/4032497/442665

Answer 3

Esta solución también podría ayudar:

$(document).ready(function () {
    $(window).resize(function() {
        if ($(window).width() < 600) {
            $(''body'').css(''font-size'', ''2.8vw'' );
        } else if ($(window).width() >= 600 && $(window).width() < 750) {
            $(''body'').css(''font-size'', ''2.4vw'');
        } 
         // and so on... (according to our needs)
        } else if ($(window).width() >= 1200) {
            $(''body'').css(''font-size'', ''1.2vw'');
        }
    }); 
  });

¡Me funcionó bien!

Answer 4

Para referencia, aquí hay una solución JS que redimensiona una fuente dependiendo de la longitud del texto dentro de un contenedor.

Codepen con código ligeramente modificado, pero la misma idea que a continuación:

function scaleFontSize(element) {
    var container = document.getElementById(element);

    // We only want to scale down long text, so first we reset
    // font-size to 100%, in case this function is called multiple times.
    container.style.fontSize = "100%";

    // Now actually check if the text is wider than
    // its container, if so then reduce font-size
    if (container.scrollWidth > container.clientWidth) {
        container.style.fontSize = "70%";
    }
}

Para mí, llamo a esta función cuando un usuario hace una selección en un menú desplegable, y luego se llena un div en mi menú (aquí es donde ocurre el texto dinámico).

    scaleFontSize("my_container_div");

Además, también uso elipsis CSS ("...") para truncar texto aún más largo , así:

#my_container_div {
    width: 200px; /* width required for text-overflow to work */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Entonces, en última instancia:

• Texto breve: por ejemplo, "MANZANAS"

  Totalmente rendido, bonitas letras grandes.

• Texto largo: por ejemplo, "MANZANAS Y NARANJAS"

  Se reduce el 70% a través de la función de escala JS anterior.

• Texto super largo: por ejemplo, "MANZANAS Y NARANJAS Y BANANO ..."

  Se reduce el 70% Y se trunca con elipsis "...", a través de la función de escala JS anterior junto con la regla CSS.

También puede explorar jugar con el espaciado de letras CSS para reducir el tamaño del texto mientras mantiene el mismo tamaño de fuente.

Answer 5

Probablemente, la única forma sería establecer diferentes anchos para diferentes tamaños de pantalla, pero este enfoque es bastante incorrecto y debería usar una solución js.

h1 {
    font-size: 20px;
}

@media all and (max-device-width: 720px){
    h1 {
        font-size: 18px;
    }
}

@media all and (max-device-width: 640px){
    h1 {
        font-size: 16px;
    }
}

@media all and (max-device-width: 320px){
    h1 {
        font-size: 12px;
    }
}

Answer 6

Pruebe la biblioteca RFS (para el tamaño de fuente sensible) de MartijnCuppens que tal vez se implementará en Bootstrap

Answer 7

Sé que estoy resucitando una pregunta muerta hace mucho tiempo, pero tenía la misma pregunta y quería agregar algo. Por favor, no me prohíba esto, sentí que era lo suficientemente importante como para justificar esta respuesta, eliminaré si es necesario. @Joseph Silber está equivocado, codificar todas las posibilidades en realidad es una forma viable de hacer esto. La razón es porque en realidad no hay infinitas posibilidades. Bueno, técnicamente los hay, pero el 99% de sus visitantes usarán una resolución estándar. Esto es doblemente cierto para los dispositivos móviles (la razón principal para el diseño web sensible) porque la mayoría de los sistemas operativos móviles ejecutan aplicaciones en pantalla completa sin cambiar el tamaño de la ventana.

Además, la altura es bastante irrelevante debido a la barra de desplazamiento (hasta cierto punto, dejaría inmediatamente una página web que tenía más de 4 o 5 pies de largo, pero esto es cierto en su mayor parte), por lo que solo debe preocuparse por el ancho. Y realmente, los únicos anchos que necesita codificar son los siguientes: 240, 320, 480 (para iThings más antiguos), 640, 800, 1024, 1280, 1440, 1600, 1920, 2048, 2560. Ni siquiera se moleste por 4k, hinchará demasiado tus imágenes y el tamaño 2560 estirado a 100% de ancho se ve bien en un monitor de 4k (lo he probado). Además, no se moleste con 720 (720x480) como sugirió el póster anterior. Es una resolución utilizada casi exclusivamente por cámaras digitales, y aún así es muy poco común.

Si alguien está usando una resolución exótica, casi cualquier renderizador hecho en los últimos 15 años se redondeará, así que si el ancho de la pantalla de alguien es, digamos. 1100, se va a cargar la regla de 1024 CSS, su sitio no debería romperse. Esto hace que la rendición de cuentas para resoluciones exóticas al tratar de crear una regla de respuesta sea innecesaria, y la idea de que debe codificar cada posible píxel a píxel de configuración es ridícula, a menos que alguien use un navegador web tan desactualizado que su sitio probablemente no se cargaría. todos de todos modos

Answer 8

Usted podría estar interesado en el enfoque calc :

font-size: calc(4vw + 4vh + 2vmin);

hecho. Ajustar los valores hasta que coincida con su gusto.

Fuente: https://codepen.io/CrocoDillon/pen/fBJxu

Answer 9

vw es una solución, pero definitivamente no es buena, digamos que si configura el ancho de la fuente en 3vw, se ve normal en una situación normal, pero una vez que la navega con monitores de 2k, 4k o incluso 8k, la fuente se verá enorme, además de los dispositivos más pequeños, se ven pequeños, por supuesto, puede resolver este problema usando una consulta de medios, pero el verdadero problema es que nunca puede obtener el tamaño de fuente exacto que solicita, porque vw está limitado al ancho de la vista, no al ancho del contenido.

Una vez solución sería utilizar calc junto con vw.

calc(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));

el código de arriba establece el tamaño de fuente mínimo en 42px, y el máximo en 60px, comienza a escalarse cuando el navegador es más ancho que 768px, y alcanza gradualmente 60 cuando alcanza 1440 en el ancho de la ventana

Para cualquier cosa mayor o menor que 1440 y 768, puede darle un valor estático o aplicar el mismo enfoque.

El punto es, este enfoque define su fuente por el tamaño del contenido. Lo que quiero decir con esto es que tienes un contenido con un ancho máximo de 1440, y en qué situación quieres que la fuente sea de 60px, pero cuando es móvil, quieres 42, entonces puedes adoptar este mismo enfoque, la fuente escala de 768 a 1440, para cualquier cosa más grande que 1440, solo dale 60px estático, ya que el contenido en sí no crece más que eso.

Answer 10

CSS3 admite nuevas dimensiones que son relativas al puerto de visualización. Pero esto no funciona en android <4.4

1. 3.2vw = 3.2% del ancho de la ventana gráfica
2. 3.2vh = 3.2% de altura del viewport
3. 3.2vmin = Menor de 3.2vw o 3.2vh

4. 3.2vmax = Mayor de 3.2vw o 3.2vh

   body
   {
       font-size: 3.2vw;
   }

vea http://css-tricks.com/viewport-sized-typography/ y también mire en caniuse.com/....

o

Utilice la consulta de medios. La forma más simple es usar las dimensiones en% o em. Solo cambia el tamaño de fuente base, todo cambiará.

@media (max-width: @screen-xs) {
    body{font-size: 10px;}
}

@media (max-width: @screen-sm) {
    body{font-size: 14px;}
}


h5{
    font-size: 1.4em;
}

Usa las dimensiones en % o em . Solo cambia el tamaño de fuente base, todo cambiará. En la anterior, solo puede cambiar la fuente del cuerpo y no h1 cada vez o dejar que el tamaño de fuente base se ajuste al valor predeterminado del dispositivo y descanse todo en em

vea kyleschaeffer.com/.... para más información sobre em, px y%