Tengo un contenedor con un fijo con. En este contenedor habrá algún texto con una longitud variable. Lo que estoy tratando de hacer es ajustar automáticamente el tamaño de fuente del texto para que quepa en el contenedor.
¿Cuál es la mejor manera de hacer eso?
Ya intenté establecer el tamaño de fuente con vm , pero esto solo cambia el tamaño del texto, cuando el contenedor se vuelve más pequeño y no cuando el texto se alarga.
Más precisamente, mi html y css se ven de la siguiente manera y el texto en la label debe cambiar de tamaño si es más largo, para que no quepa en la etiqueta.
.input-wrapper { display: flex; flex-direction: row; width: 70%; } label { color: white; display: flex; flex-wrap: wrap; width: max-content; background-color: var(--violet); min-width: 30%; justify-content: center; align-items: center; word-wrap: break-word; } input { display: flex; border: 1px solid var(--violet); min-width: 70%; } <form onSubmit={this.handleSubmit}> <div className="input-wrapper"> <label id="fixed">Gas cost</label> <input type="text"/> </div> </form>Creo que no hay una única solución de CSS para eso. Las unidades vw / vh están relacionadas con la ventana gráfica y no con el contenedor principal. Entonces, cuando la ventana de su navegador se haga más grande, puede escalar con esas unidades el tamaño de su fuente.
Lo que necesitaría es algo de JavaScript que escale el tamaño de la fuente en función de la longitud del contenido del texto de los elementos. Supongamos que su tamaño de fuente base es de 16 px y espera que una etiqueta tenga una longitud de entre 1 y 80 caracteres. Tomaríamos la longitud del contenido de la etiqueta y obtendríamos un porcentaje en relación al máximo esperado de 80 caracteres, limitándolo al 100%. Estos porcentajes los negaremos y usaremos como nuestro factor de escala. Luego, aplicaremos el factor de escala para obtener el tamaño de fuente escalado, pero nuevamente lo limitaremos al tamaño de fuente mínimo.
<label id="fixed">Some long content</label> <script> function downscale(length, expectedMaxLength, baseFontSize, minFontSize) { const scalingFactor = 1 - Math.min(1 / expectedMaxLength * length, 1); return Math.ceil(Math.max(scalingFactor * (baseFontSize - minFontSize) + minFontSize, minFontSize)); } const label = document.getElementById('fixed'); const resizedFontSize = downscale( label.textContent.length, parseInt(window.getComputedStyle(label).fontSize, 10), 8 ); label.style.fontSize = `${resizedFontSize}px`; </script>