I'd like to be able to have text which resizes when it wraps so that the total height of the text block is always the same. In other words, if the text wraps to a second line then the font size becomes half the original, and if it wraps to a third line then it becomes a third of the original, etc. Is this possible in CSS or even with Javascript?
I think you can use media query or 'vw' to do that. For example.
HTML
<div>
<span class="resizing">Lorem Ipsum...</div>
</div>
CSS using media query
.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 using vw
.resizing {
font-size: 1vw; // 1vw is 1% of the browser width
font-size: calc(3px + 1vw); // Or you can do something like this.
}
I wish it helps you.