CSS puro para que el tamaño de letra responda según la cantidad dinámica de caracteres

Sé que esto podría resolverse con bastante facilidad con Javascript, pero solo estoy interesado en una solución pura de CSS.

Quiero una forma de cambiar el tamaño del texto de forma dinámica para que siempre se ajuste a un div fijo. Aquí está el marcado de muestra:

Some sample dynamic amount of text here

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

Acabo de descubrir que esto es posible usando 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 navegadores heredados, pero esto definitivamente es algo a considerar seriamente. Además, puede proporcionar retrocesos para los navegadores más antiguos de la siguiente manera:

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

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

CSS3 admite nuevas dimensiones relacionadas con el 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 la altura de la ventana gráfica
  3. 3.2vmin = Más pequeño de 3.2vw o 3.2vh
  4. 3.2vmax = Más grande de 3.2vw o 3.2vh

     body { font-size: 3.2vw; } 

vea css-tricks.com / …. y también mire caniuse.com / ….

o

Utilice la consulta de medios. La forma más simple es usar las dimensiones en% o em. Simplemente cambie el tamaño de la 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; } 

Use dimensiones en % o em . Simplemente cambie el tamaño de la fuente base, todo cambiará. En la anterior solo podías cambiar la fuente del cuerpo y no h1 cada vez o dejar que el tamaño de la fuente base fuera el predeterminado del dispositivo y descansar todo en em

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

Usted podría estar interesado en el enfoque de calc :

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

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

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

La única manera probablemente sería establecer diferentes anchuras para diferentes tamaños de pantalla, pero este enfoque es bastante inexacto 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; } } 

Sé que estoy resucitando una pregunta largamente muerta, pero tenía la misma pregunta y quería agregar algo. Por favor, no me prohíban por esto, sentí que era lo suficientemente importante como para justificar esta respuesta, lo eliminaré si es necesario. @Joseph Silber está equivocado, la encoding de 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 hay, pero el 99% de tus visitantes utilizará una resolución estándar. Esto es doblemente cierto para los dispositivos móviles (la razón principal del diseño web receptivo) porque la mayoría de los sistemas operativos móviles ejecutan aplicaciones de pantalla completa sin cambiar el tamaño de las ventanas.

Además, la altura es bastante irrelevante debido a la barra de desplazamiento (hasta cierto punto, inmediatamente dejaría una página web que tenía más de 4 o 5 pies de largo, pero esto generalmente es cierto), por lo que solo debes preocuparte por el ancho. Y realmente, los únicos anchos que necesita codificar son los siguientes: 240, 320, 480 (para iThings anteriores), 640, 800, 1024, 1280, 1440, 1600, 1920, 2048, 2560. Ni siquiera se moleste en 4k, hinchará demasiado tus imágenes y el tamaño 2560 estirado al 100% de ancho se ve bien en un monitor 4k (lo he probado). Además, no se moleste con 720 (720×480) 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á, por lo que si el ancho de pantalla de alguien es, digamos. 1100, va a cargar la regla CSS 1024, su sitio no debe romperse. Esto hace que la contabilidad de resoluciones exóticas intente crear una regla receptiva innecesaria, y la idea de que necesite codificar cada configuración posible píxel por píxel es ridícula, a menos que alguien esté usando un navegador web tan desactualizado que su sitio probablemente no se cargue a todo de todos modos.

Como referencia, aquí hay una solución JS que reajusta el tamaño de una fuente en función de la longitud del texto dentro de un contenedor.

 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 aparece el texto dynamic).

  scaleFontSize("my_container_div"); 

Además, también uso las elipses de CSS (“…”) para truncar aún más el texto también, así:

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

Entonces, finalmente:

  • Palabras cortas: ej. “APPLES”

    Completamente renderizado, bonitas letras grandes.

  • Palabras largas: p . Ej. “MANZANAS Y NARANJAS”

    Se reduce a escala un 70%, mediante la función de escalamiento de JS anterior.

  • Palabras súper largas: p . Ej. “MANZANAS Y NARANJAS Y BANANO …”

    Se reduce a una escala del 70% Y se trunca con un “…” puntos suspensivos, a través de la función de escalamiento JS y la regla CSS.

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

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

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 un JS Bin: http://jsbin.com/pidavon/edit?html,css,js,console,output
Sugiera posibles mejoras (no estoy realmente interesado en usar canvas para medir el texto ... parece demasiada sobrecarga (?)).

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

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!

vw es una solución, pero definitivamente no es buena, digamos que si configuras el ancho de fuente en 3vw, parece normal en una situación normal, pero una vez que la exploras usando 2k, 4k o incluso 8k monitores, la fuente se verá enorme, más el dispositivos más pequeños, se ven diminutos, por supuesto puede resolver este problema utilizando la consulta de medios, pero el verdadero dolor 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, la solución sería usar calc junto con vw.

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

el código anterior 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 gradualmente alcanza 60 cuando alcanza 1440 en ancho de ventana

Para cualquier cosa más grande o más pequeña que 1440 y 768, puede darle un valor estático o aplicar el mismo enfoque.

El punto es que este enfoque define su fuente por el tamaño del contenido. Lo que quiero decir con esto es decir que tienes un contenido con un ancho máximo de 1440, y bajo 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 algo más grande que 1440, solo dale 60px estático, porque el contenido en sí mismo no crece más grande que eso.