Me gustaría poder tener texto que cambie de tamaño cuando se ajusta para que la altura total del bloque de texto sea siempre la misma. En otras palabras, si el texto se ajusta a una segunda línea, el tamaño de fuente se convierte en la mitad del original, y si se ajusta a una tercera línea, se convierte en un tercio del original, etc. ¿Es esto posible en CSS o incluso con Javascript?
Creo que puedes usar media query o 'vw' para hacer eso. Por ejemplo.
HTML
<div> <span class="resizing">Lorem Ipsum...</div> </div>CSS usando consulta de medios
.resizing { font-size: 1rem; @media screen and (max-width: 800px) { // You can change this breakpoint font-size: 0.5rem; } @media screen and (max-width: 400px) { // You can also change this breakpoint font-size: 0.33rem; } }CSS usando vw
.resizing { font-size: 1vw; // 1vw is 1% of the browser width font-size: calc(3px + 1vw); // Or you can do something like this. }Deseo que te ayude.