How to make an adjustable font-size based on screen width and content? css

Asked Apr 21 '21 at 02:54

Active Apr 21 '21 at 02:54

Viewed 16 times

I can't find any reference on how to do adjustable font-size depending on screen-width and its content? Tried the following code below but it doesn't work when content change it only works in dynamic screen-width.

<div class="sample">
  <span>Sample</span>
  <span>Sample Sample Sample</span>
  <span>Added Added</span>
</div>

.sample {
  height: 50px;
  width: 320px;
  border: 1px solid black;
  font-size: 6vw;
}

Expected output should be.

But the current code looks like below:

asked Apr 21 '21 at 02:54

schutte

1,455
5
18
33

You cannot base font size on content. CSS knows absolutely nothing about your content with the `:empty` exception. – connexo Apr 21 '21 at 02:59
@connexo is there a way Sir we can make it as oneline even the content changes by adjusting font-size? – schutte Apr 21 '21 at 03:00
you can use `rem` and `em` – BillJustin Apr 21 '21 at 03:11

How to make an adjustable font-size based on screen width and content? css

0 Answers0