Escalado de fuente basado en el ancho del contenedor

Estoy teniendo dificultades para entender la escala de fonts.

Actualmente tengo este sitio con un font-size de font-size cuerpo del 100%. 100% de lo que sin embargo? Esto parece calcular a 16px.

Tenía la impresión de que el 100% de alguna manera se referiría al tamaño de la ventana del navegador, pero aparentemente no porque siempre es de 16px si la ventana se redimensiona a un ancho móvil o a una pantalla panorámica completa.

¿Cómo puedo hacer que el texto en la escala de mi sitio esté relacionado con su contenedor? Intenté usar em pero esto tampoco escala.

Mi razonamiento es que cosas como mi menú se aplastan cuando cambias el tamaño, así que tengo que reducir el font-size de font-size px de .menuItem entre otros elementos en relación con el ancho del contenedor. (Por ejemplo, en el menú de un escritorio grande, 22px funciona perfectamente. Baje al ancho de la tableta y 16px es más apropiado).

Soy consciente de que puedo agregar puntos de interrupción, pero realmente quiero que el texto se escale, así como tener puntos de corte adicionales, de lo contrario terminaré con cientos de puntos de corte por cada 100px de disminución de ancho para controlar el texto.

EDITAR: Si el contenedor no es el cuerpo CSS Tricks cubre todas sus opciones aquí: https://css-tricks.com/fitting-text-to-a-container/

Si el contenedor es el cuerpo, lo que está buscando es la Porcentaje de porcentaje de la ventana gráfica :

Las longitudes de porcentaje de ventana gráfica son relativas al tamaño del bloque que contiene inicial . Cuando se cambia la altura o el ancho del bloque contenedor inicial, se ajustan en consecuencia. Sin embargo, cuando el valor del desbordamiento en el elemento raíz es automático, se supone que las barras de desplazamiento no existen.

Los valores son:

  • vw (% del ancho de la ventana gráfica)
  • vh (% de la altura de la ventana gráfica)
  • vi (1% del tamaño de la ventana gráfica en la dirección del eje en línea del elemento raíz)
  • vb (1% del tamaño de la ventana gráfica en la dirección del eje del bloque del elemento raíz)
  • vmin (el más pequeño de vw o vh )
  • vmax (el más grande o vw o vh )

1 v * es igual al 1% del bloque que contiene inicial.

usarlo se ve así:

 p { font-size: 4vw; } 

Como puede ver, cuando el ancho de la ventana gráfica aumenta, también lo hace el tamaño de fuente, sin la necesidad de utilizar consultas de medios.

Estos valores son una unidad de tamaño, como px o em , por lo que también se pueden usar para clasificar otros elementos, como ancho, margen o relleno.

El soporte del navegador es bastante bueno, pero es probable que necesite un respaldo, como por ejemplo:

 p { font-size: 16px; font-size: 4vw; } 

Consulte las estadísticas de soporte: http://caniuse.com/#feat=viewport-units .

Además, echa un vistazo a CSS-Tricks para una mirada más amplia: http://css-tricks.com/viewport-sized-typography/

Aquí hay un buen artículo sobre cómo establecer los tamaños mínimo / máximo y ejercer un poco más de control sobre los tamaños: http://madebymike.com.au/writing/precise-control-responsive-typography/

Y aquí hay un artículo sobre cómo configurar tu tamaño usando calc () para que el texto llene la ventana gráfica: http://codepen.io/CrocoDillon/pen/fBJxu

Además, consulte este artículo, que utiliza una técnica denominada “fundición líder” para ajustar también la altura de la línea. https://css-tricks.com/molten-leading-css/

Pero, ¿y si el contenedor no es la ventana (cuerpo)?

Esta pregunta se hace en un comentario de Alex bajo la respuesta aceptada.

Ese hecho no significa que no se pueda usar vw hasta cierto punto para el tamaño de ese contenedor. Ahora, para ver cualquier variación, uno debe estar asumiendo que el contenedor de alguna manera es flexible en tamaño. Ya sea a través de un width porcentual directo o por medio de márgenes 100% menos. El punto se convierte en “irrelevante” si el contenedor siempre se establece en, digamos, 200px ancho, y luego establece un font-size que funcione para ese ancho.

Ejemplo 1

Sin embargo, con un contenedor de ancho flexible, se debe tener en cuenta que, de alguna manera, el contenedor aún se está dimensionando fuera de la ventana gráfica . Como tal, se trata de ajustar una configuración de vw basada en esa diferencia de porcentaje de tamaño a la ventana gráfica, lo que significa tener en cuenta el tamaño de los contenedores primarios. Toma este ejemplo :

 div { width: 50%; border: 1px solid black; margin: 20px; font-size: 16px; /* 100 = viewport width, as 1vw = 1/100th of that So if the container is 50% of viewport (as here) then factor that into how you want it to size. Let's say you like 5vw if it were the whole width, then for this container, size it at 2.5vw (5 * .5 [ie 50%]) */ font-size: 2.5vw; } 

Suponiendo que el div es un elemento secundario del body , es el 50% de ese ancho del 100% , que es el tamaño de la ventana gráfica en este caso básico. Básicamente, desea establecer un vw que se vea bien para usted. Como puede ver en mi comentario en el css anterior, puede “pensar” matemáticamente eso con respecto al tamaño completo de la ventana gráfica, pero no necesita hacer eso. El texto se va a “flexionar” con el contenedor, porque el contenedor se está flexionando con el cambio de tamaño de la ventana gráfica. ACTUALIZACIÓN: aquí hay un ejemplo de dos contenedores de diferentes tamaños .

Ejemplo 2

Puede ayudar a garantizar el tamaño de la ventana gráfica forzando el cálculo en función de eso. Considera este ejemplo :

 html {width: 100%;} /* force html to be viewport width */ body {width: 150%; } /* overflow the body */ div { width: 50%; border: 1px solid black; margin: 20px; font-size: 16px; /* 100 = viewport width, as 1vw = 1/100th of that Here, the body is 150% of viewport, but the container is 50% of viewport, so both parents factor into how you want it to size. Let's say you like 5vw if it were the whole width, then for this container, size it at 3.75vw (5 * 1.5 [ie 150%]) * .5 [ie 50%] */ font-size: 3.75vw; } 

El tamaño sigue basándose en la ventana gráfica, pero, en esencia, está configurado en función del tamaño del contenedor.

El tamaño del contenedor debería cambiar dinámicamente …

Si el dimensionamiento del elemento contenedor terminó cambiando dinámicamente su relación de porcentaje a través de @media puntos de interrupción o vía javascript, entonces cualquiera que sea el “objective” base necesitaría un nuevo cálculo para mantener la misma “relación” para el tamaño del texto.

Tome el ejemplo n. ° 1 arriba. Si el div se cambió al 25% ancho por @media o javascript, entonces, al mismo tiempo, el font-size necesitaría ajustarse en la consulta de medios o mediante javascript al nuevo cálculo de 5vw * .25 = 1.25 . Esto pondría el tamaño del texto en el mismo tamaño que habría tenido si el “ancho” del contenedor original del 50% hubiera reducido a la mitad del tamaño de la ventana gráfica, pero ahora se ha reducido debido a un cambio en su propio cálculo de porcentaje.

Un reto

Con la función CSS3 calc() en uso, sería difícil ajustar dinámicamente, ya que esa función no funciona para font-size de font-size en este momento. Entonces no podrías hacer un ajuste puro de CSS3 si tu ancho está cambiando en calc() . Por supuesto, un pequeño ajuste de ancho para los márgenes puede no ser suficiente para garantizar cualquier cambio en font-size , por lo que puede no importar.

Lo que hago en uno de mis proyectos es una “mezcla” entre vw y vh para ajustar el tamaño de letra a mis necesidades, por ej .:

 font-size: calc(3vw + 3vh); 

Sé que esto no responde a la pregunta de la operación, pero tal vez pueda ser una solución para cualquier otra persona.

Hay una gran filosofía para este problema. Lo más fácil sería dar un cierto tamaño de fuente al cuerpo (recomiendo 10), y luego todo el otro elemento tendría su fuente en em o rem. Te daré un ejemplo para entender esas unidades. Em siempre es relativo a su padre

 body{font-size:10px;} .menu{font-size:2em;} /* that means 2*10px = 20px */ .menu li{font-size:1.5em;} /* that means 1.5*20px = 30px */ 

Rem siempre es relativo al cuerpo

 body{font-size:10px;} .menu{font-size:2rem;} /* that means 2*10px = 20px */ .menu li{font-size:1.5rem;} /* that means 1.5*10px = 15px */ 

Y que podría crear una secuencia de comandos que modificaría el tamaño de la fuente en relación con el ancho de su contenedor. Pero esto no es lo que recomendaría. Porque en un contenedor de 900px de ancho, por ejemplo, tendría un elemento p con un tamaño de letra de 12px, digamos. Y en su ideea eso se convertiría en un contenedor de 300 px de ancho en un tamaño de fuente de 4 px. Tiene que haber un límite inferior. Otra solución sería con consultas de medios, para que pueda establecer la fuente para diferentes anchos.

Pero las soluciones que recomendaría es usar una biblioteca de JavaScript que lo ayude con eso. Y fittext.js que encontré hasta ahora.

Solución con SVG:

 
Text

https://jsfiddle.net/qc8ht5eb/

Actualizado porque obtuve un voto negativo.

Aquí está la función:

 document.body.setScaledFont = function(f) { var s = this.offsetWidth, fs = s * f; this.style.fontSize = fs + '%'; return this }; 

A continuación, convierta todos los tamaños de fuente de elementos secundarios de sus documentos a em o%.

A continuación, agregue algo como esto a su código para establecer el tamaño de la fuente base.

 document.body.setScaledFont(0.35); window.onresize = function() { document.body.setScaledFont(0.35); } 

http://jsfiddle.net/0tpvccjt/

Esto puede no ser muy práctico, pero si quiere que la fuente sea una función directa del padre, sin tener ningún JS que escuche / bucles (intervalo) para leer el tamaño de la página / div, hay una manera de hacerlo. Iframes. Cualquier cosa dentro del iframe considerará el tamaño del iframe como el tamaño de la ventana gráfica. Entonces, el truco es crear un iframe cuyo ancho sea el ancho máximo que desee que tenga su texto, y cuya altura sea igual a la altura máxima * de la relación de aspecto del texto en particular.

Dejando de lado la limitación de que las unidades de visualización también pueden aparecer en unidades secundarias laterales para texto (como si el% del tamaño se comportara como todos los demás), las unidades de vista proporcionan una herramienta muy poderosa: poder obtener la dimensión mínima / máxima . No puedes hacer eso en ningún otro lado, no puedes decir … haz que la altura de este div sea el ancho del elemento * principal.

Una vez dicho esto, el truco es usar vmin y establecer el tamaño del iframe para que [fraction] * total height tenga un buen tamaño de fuente cuando la altura sea la dimensión límite, y [fraction] * width total cuando el ancho sea el limitando la dimensión Esta es la razón por la que la altura debe ser un producto del ancho y la relación de aspecto.

para mi ejemplo particular, tienes

 .main iframe{ position: absolute; top: 50%; left: 50%; width: 100%; height: calc(3.5 * 100%); background: rgba(0,0,0,0); border-style: none; transform: translate3d(-50%,-50%,0); } 

La pequeña molestia con este método es que tiene que establecer manualmente el CSS del iframe. Si adjuntas todo el archivo CSS, eso requeriría mucho ancho de banda para muchas áreas de texto. Entonces, lo que hago es adjuntar la regla que deseo directamente desde mi CSS.

 var rule = document.styleSheets[1].rules[4]; var iDoc = document.querySelector('iframe').contentDocument; iDoc.styleSheets[0].insertRule(rule.cssText); 

Puede escribir una función pequeña que obtenga la regla CSS / todas las reglas CSS que afectarían el área de texto.

No puedo pensar en otra forma de hacerlo sin tener algunos ciclismo / escuchar JS. La verdadera solución sería que los navegadores proporcionaran una forma de escalar el texto como una función del contenedor principal AND para proporcionar también la misma funcionalidad de tipo vmin / vmax.

JS violín: https://jsfiddle.net/0jr7rrgm/3/ (haga clic una vez para bloquear el cuadrado rojo en el mouse, haga clic de nuevo para liberar)

La mayoría de las JS en el violín son solo mi función personalizada de hacer clic y arrastrar

Solución Pure-CSS con calc() , unidades CSS y matemática

Esto no es precisamente lo que OP pide, pero puede hacer el día de alguien. Esta respuesta no es nada fácil y necesita algunas investigaciones al final del desarrollador.

Finalmente vine para obtener una solución de CSS puro para esto usando calc() con diferentes unidades. Necesitará una comprensión matemática básica de las fórmulas para calcular su expresión para calc() .

Cuando resolví esto, tuve que obtener un encabezado receptivo de ancho de página completo con algunos padres de relleno en DOM. Usaré mis valores aquí, reemplázalos por los tuyos.

Para las matemáticas

Necesitará:

  • muy bien ajustado ratio en alguna ventana gráfica, utilicé 320px, así obtuve 24px de alto y 224px de ancho por lo que la relación es 9.333 … o 28/3
  • el ancho del contenedor, tenía padding: 3em y ancho completo, así que esto llegó a 100wv - 2 * 3em

X es el ancho del contenedor, entonces reemplácelo con su propia expresión o ajuste el valor para obtener texto de página completa. R es la proporción que tendrá. Puede obtenerlo ajustando los valores en alguna ventana gráfica, inspeccionando el ancho y el alto del elemento y reemplazándolos con sus propios valores. Además, es width / heigth 😉

 x = 100vw - 2 * 3em = 100vw - 6em r = 224px/24px = 9.333... = 28 / 3 y = x / r = (100vw - 6em) / (28 / 3) = (100vw - 6em) * 3 / 28 = (300vw - 18em) / 28 = (75vw - 4.5rem) / 7 

Y ¡bang! ¡Funcionó! escribí

 font-size: calc((75vw - 4.5rem) / 7) 

a mi encabezado y se ajustó muy bien en cada ventana gráfica.

pero como funciona?

Necesitamos algunas constantes aquí. 100vw significa el ancho completo de la ventana 100vw , y mi objective era establecer un encabezado de ancho completo con algo de relleno.

El radio. Obtener un ancho y alto en una ventana gráfica me dio una razón para jugar, y con la proporción sé cuál debería ser la altura en el ancho de otra ventana gráfica. Calcularlos con la mano tomaría mucho tiempo y al menos tomaría mucho ancho de banda, por lo que no es una buena respuesta.

Conclusión

Me pregunto por qué nadie ha descubierto esto y algunas personas incluso dicen que esto sería imposible de jugar con CSS. No me gusta usar Javascript para ajustar elementos, por lo que no acepto respuestas JS o incluso jQuery sin tener que profundizar más. En general, es bueno que esto se haya resuelto y este es un paso más hacia las implementaciones de CSS puro en el diseño de sitios web.

Me disculpo por cualquier convención inusual en mi texto, no soy hablante nativo en inglés y también soy bastante nuevo para escribir respuestas de SO.

Editar : también se debe tener en cuenta que tenemos barras de desplazamiento malvadas en algunos navegadores. Por ejemplo, al usar Firefox noté que 100vw significa el ancho total de la ventana 100vw , que se extiende debajo de la barra de desplazamiento (¡donde el contenido no se puede expandir!), Por lo que el texto de ancho debe definirse cuidadosamente y preferiblemente probarse con muchos navegadores y dispositivos.

Hay una manera de hacer esto SIN Javascript!

Puedes usar un svg en línea. Puedes usar css en un svg si está en línea. Debes recordar que usar este método significa que tu svg responderá al tamaño de su contenedor.

Intenta usar la siguiente solución …

HTML

 
SAVE $500

CSS

 div { width: 50%; /* set your container width */ height: 50%; /* Set your container height */ } svg { width: 100%; height: auto; } text { transform: translate(40px, 202px); font-size: 62px; fill: #000; } 

ejemplo: https://jsfiddle.net/k8L4xLLa/32/

¿Quieres algo más llamativo?

Los SVG también te permiten hacer cosas geniales con formas y basura. Echa un vistazo a este gran caso de uso para texto escalable …

https://jsfiddle.net/k8L4xLLa/14/

Usando vw , em & co. funciona con seguridad, pero imo siempre necesita un toque humano para afinarlo.

Aquí hay un script que acabo de escribir basado en la respuesta de @ tnt-rox que intenta automatizar el toque humano:

 $('#controller').click(function(){ $('h2').each(function(){ var $el = $(this), max = $el.get(0), el = null ; max = max ? max.offsetWidth : 320 ; $el.css({ 'font-size': '1em', 'display': 'inline', }); el = $el.get(0); el.get_float = function(){ var fs = 0 ; if (this.style && this.style.fontSize) { fs = parseFloat(this.style.fontSize.replace( /([\d\.]+)em/g, '$1' )); } return fs; }; el.bigger = function(){ this.style.fontSize = (this.get_float() +0.1) +'em'; }; while ( el.offsetWidth < max ) { el.bigger(); } // finishing touch. $el.css({ 'font-size': ((el.get_float() -0.1) +'em'), 'line-height': 'normal', 'display': '', }); }); // end of ( each ) }); // end of ( font scaling test ) 
 div { width: 50%; background-color: tomato; font-family: 'Arial'; } h2 { white-space: nowrap; } h2:nth-child(2) { font-style: italic; } 
   

Lorem ipsum dolor

Test String

Sweet Concatenation

Font Scaling

100% es relativo al tamaño de fuente base, que si no lo ha configurado sería el valor predeterminado del agente de usuario del navegador.

Para obtener el efecto que buscas, utilizaría un trozo de javascript para ajustar el tamaño de la fuente base en relación con las dimensiones de la ventana.

Dentro de su CSS intente agregar esto en la parte inferior cambiando el ancho de 320px dondequiera que su diseño comience a romperse:

  @media only screen and (max-width: 320px) { body { font-size: 1em; } } 

Luego, proporcione el tamaño de fuente en “px” o “em” como lo desee.

¿Has probado http://simplefocus.com/flowtype/ ?

Esto es lo que uso para mis sitios y funcionó perfectamente. Espero eso ayude.

¿Estás buscando algo así? =>
http://jsfiddle.net/sijav/dGsC9/4/
http://fiddle.jshell.net/sijav/dGsC9/4/show/
He utilizado flowtype y está funcionando muy bien (sin embargo, es js y no una solución de CSS pura)

 $('body').flowtype({ minFont : 10, maxFont : 40, minimum : 500, maximum : 1200, fontRatio : 70 }); 

Mi propia solución, basada en jQuery, funciona aumentando gradualmente el tamaño de la fuente hasta que el contenedor obtiene un gran aumento en la altura (lo que significa que tiene un salto de línea). Es bastante simple pero funciona bastante bien y es muy fácil de usar. No tiene que saber NADA sobre la fuente que se está utilizando, el navegador se encargará de todo.

Puedes jugar con él en http://jsfiddle.net/tubededentifrice/u5y15d0L/2/

La magia sucede aquí:

 var setMaxTextSize=function(jElement) { //Get and set the font size into data for reuse upon resize var fontSize=parseInt(jElement.data(quickFitFontSizeData)) || parseInt(jElement.css("font-size")); jElement.data(quickFitFontSizeData,fontSize); //Gradually increase font size until the element gets a big increase in height (ie line break) var i=0; var previousHeight; do { previousHeight=jElement.height(); jElement.css("font-size",""+(++fontSize)+"px"); } while(i++<300 && jElement.height()-previousHeight 

Este componente web cambia el tamaño de la fuente para que el ancho del texto interno coincida con el ancho del contenedor. Verifica la demo

Puedes usarlo así:

 Lorem Ipsum 

Mi problema era similar, pero relacionado con el escalado de texto dentro de un encabezado. Probé Fit Font pero necesitaba alternar el compresor para obtener resultados, ya que estaba resolviendo un problema ligeramente diferente, como lo era Text Flow. Así que escribí mi pequeño plugin que reduce el tamaño de la fuente para que se ajuste al contenedor, suponiendo que tienes overflow: hidden y white-space: nowrap modo que aunque reducir la fuente al mínimo no permita mostrar el encabezado completo, solo corta lo que puede mostrar.

 (function($) { // Reduces the size of text in the element to fit the parent. $.fn.reduceTextSize = function(options) { options = $.extend({ minFontSize: 10 }, options); function checkWidth(em) { var $em = $(em); var oldPosition = $em.css('position'); $em.css('position', 'absolute'); var width = $em.width(); $em.css('position', oldPosition); return width; } return this.each(function(){ var $this = $(this); var $parent = $this.parent(); var prevFontSize; while (checkWidth($this) > $parent.width()) { var currentFontSize = parseInt($this.css('font-size').replace('px', '')); // Stop looping if min font size reached, or font size did not change last iteration. if (isNaN(currentFontSize) || currentFontSize <= options.minFontSize || prevFontSize && prevFontSize == currentFontSize) { break; } prevFontSize = currentFontSize; $this.css('font-size', (currentFontSize - 1) + 'px'); } }); }; })(jQuery); 

He preparado la función de escala simple usando la transformación css en lugar del tamaño de fuente. Puede usarlo dentro de cualquier contenedor, no tiene que establecer consultas de medios, etc. 🙂

Publicación del blog: https://blog.polarbits.co/2017/03/07/full-width-css-js-scalable-header/

El código:

 function scaleHeader() { var scalable = document.querySelectorAll('.scale--js'); var margin = 10; for (var i = 0; i < scalable.length; i++) { var scalableContainer = scalable[i].parentNode; scalable[i].style.transform = 'scale(1)'; var scalableContainerWidth = scalableContainer.offsetWidth - margin; var scalableWidth = scalable[i].offsetWidth; scalable[i].style.transform = 'scale(' + scalableContainerWidth / scalableWidth + ')'; scalableContainer.style.height = scalable[i].getBoundingClientRect().height + 'px'; } } 

Demostración de trabajo: https://codepen.io/maciejkorsan/pen/BWLryj

mira mi código, haz que el font size smaller para que se fit lo que sea que haya

pero creo que esto no conduce a una buena experiencia de usuario

 var containerWidth = $("#ui-id-2").width(); var items = $(".quickSearchAutocomplete .ui-menu-item"); var fontSize = 16; items.each(function(){ //display value depend sometimes on your case you may make it block or inline-table instead of inline-block or whatever value that make the div take overflow width $(this).css({"whiteSpace":"nowrap","display":"inline-block"}); while ($(this).width() > containerWidth){ console.log("$(this).width()"+ $(this).width() + "containerWidth" + containerWidth) $(this).css("font-size", fontSize -= 0.5); } }); 

resultado

espero que esto te ayude

Siempre tenga su elemento con este atributo:

Javascript: element.style.fontSize = "100%";

o

CSS: style = "font-size: 100%;"

Cuando vaya a pantalla completa, ya debería tener una escala de escala calculada (escala> 1 o escala = 1). Luego, en pantalla completa:

 document.body.style.fontSize = (scale * 100) + "%"; 

Funciona muy bien con poco código.

Como alternativa de JavaScript (o su única solución), puede usar mi complemento jQuery Scalem , que le permite escalar en relación con el elemento principal (contenedor) al pasar la opción de reference .

En caso de que sea útil para cualquier persona, la mayoría de las soluciones en este hilo estaban envolviendo texto en múltiples líneas, formulario e.

Pero luego encontré esto, y funcionó:

https://github.com/chunksnbits/jquery-quickfit

Ejemplo de uso:

$('.someText').quickfit({max:50,tolerance:.4})

Intente utilizar el plugin fitText , ya que los tamaños de Viewport no son la solución a este problema. Solo agrega la biblioteca

y cambie el tamaño de letra para corregir por configuración el coeficiente de texto:

 $("#text_div").fitText(0.8); 

puede establecer valores máximos y mínimos de texto:

 $("#text_div").fitText(0.8, { minFontSize: '12px', maxFontSize: '36px' }); 

Para texto dynamic, este complemento es bastante útil http://freqdec.github.io/slabText/ . Simplemente agrega css

 .slabtexted .slabtext { display: -moz-inline-box; display: inline-block; white-space: nowrap; } .slabtextinactive .slabtext { display: inline; white-space: normal; font-size: 1em !important; letter-spacing: inherit !important; word-spacing: inherit !important; *letter-spacing: normal !important; *word-spacing: normal !important; } .slabtextdone .slabtext { display: block; } 

y script

 $('#mydiv').slabText(); 

Para hacer que el tamaño de fuente se ajuste a su contenedor, en lugar de la ventana, vea la función resizeFont() que he compartido en esta pregunta (una combinación de otras respuestas, la mayoría de las cuales ya están vinculadas aquí). Se desencadena usando window.addEventListener('resize', resizeFont); .

Vanilla JS: cambiar el tamaño de fuente impresionante para adaptarse al contenedor

JS:

 function resizeFont() { var elements = document.getElementsByClassName('resize'); console.log(elements); if (elements.length < 0) { return; } _len = elements.length; for (_i = 0; _i < _len; _i++) { var el = elements[_i]; el.style.fontSize = "100%"; for (var size = 100; el.scrollHeight > el.clientHeight; size -= 10) { el.style.fontSize = size + '%'; } } } 

Quizás podría usar vw / vh como alternativa, por lo que dinámicamente asigna unidades em o rem usando javascript, asegurando que las fonts se escalen a la ventana si javascript está deshabilitado.

Aplique la clase .resize a todos los elementos que contengan el texto que desea escalar.

Active la función antes de agregar el detector de eventos de cambio de tamaño de la ventana. Luego, cualquier texto que no se ajuste a su contenedor se reducirá cuando se cargue la página, así como cuando se redimensiona.

NOTA: El font-size predeterminado debe establecerse en em , rem o % para lograr resultados adecuados … y si el diseño de sus elementos es demasiado complejo, el navegador podría bloquearse si comienza a cambiar el tamaño de la ventana frenéticamente.

Esto funcionó para mí:

I try to approx font-size based on a width/heght got from setting font-size:10px. Basically the idea is “if i have 20px width and 11px height with font-size:10px, so what would it be the max font-size to math a container of 50px width and 30px height?”

The answer is a double proportion system:

{ 20:10=50:X, 11:10=30:Y } = { X= (10*50)/20 , Y= (10*30)/11 }

Now X is a font-size that will match width, Y is a font-size that will match height; take the smallest value

 function getMaxFontSizeApprox(el){ var fontSize = 10; var p = el.parentNode; var parent_h = p.offsetHeight ? p.offsetHeight : p.style.pixelHeight; if(!parent_h)parent_h = 0; var parent_w = p.offsetHeight ? p.offsetWidth : p.style.pixelWidth; if(!parent_w)parent_w = 0; el.style.fontSize = fontSize + "px"; var el_h = el.offsetHeight ? el.offsetHeight : el.style.pixelHeight; if(!el_h)el_h = 0; var el_w = el.offsetHeight ? el.offsetWidth : el.style.pixelWidth; if(!el_w)el_w = 0; //0.5 is the error on the measure that js does //if real measure had been 12.49 px => js would have said 12px //so we think about the worst case when could have, we add 0.5 to //compensate the round error var fs1 = (fontSize*(parent_w + 0.5))/(el_w + 0.5); var fs2 = (fontSize*(parent_h) + 0.5)/(el_h + 0.5); fontSize = Math.floor(Math.min(fs1,fs2)); el.style.fontSize = fontSize + "px"; return fontSize; } 

NB: the argument of the function must be a span element or an element wich is smaller than it’s parent, otherwise if children and parent have both the same width/height function will fail

I don’t see any answer with reference to CSS flex property, but it can be very useful too.

If the issue is font getting too big on widescreen desktop, I think the easiest css method would be something like this (assuming wrapper max 1000px wide)

 .specialText{ font-size:2.4vw; } @media only screen and (min-width: 1000px) { .specialText { width:24px; } } 

So it is auto sized for any screen smaller than the max width of your container, and fixed size when screen is wider (like virtually all desktop/laptops)