1

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?

theelk801
  • 33
  • 6
  • You can use media query. Resize the browser to see when the text wrap and at that measure put a media query where you reduce the font-size – Nick Dec 13 '21 at 21:14
  • CSS alone, no. With JS, very much possible. with javascript you need to measure the number of (wrapped) lines (of some element), and act accordingly (decrease font size) – vsync Dec 13 '21 at 21:14
  • Why would you do such a thing? There are countless open-source on github which auto-fit texts to their container. What is the UX goal here? – vsync Dec 13 '21 at 21:16
  • It's supposed to be for a Next app, the header has a text box for the page title which varies from page to page and the designers want it to shrink when it wraps. – theelk801 Dec 14 '21 at 21:40

1 Answers1

0

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.

elite0107
  • 94
  • 8