0

I have a div with a dynamic size (based on the mobile device size) and I want to maximize the font size based on this div size without cause the text to overflow (both x and y axis).

For example: in the code here I still can increase the font size until it overflows.

How can I achieve it ?

A pure css solution would be preferred.

.section {
  width: 50px;
  height: 150px;
  border: 1px solid red;
}

.maximal-font-size {
  font-size: 16px;
}
<div class="section maximal-font-size">
Lorem Ipsum is simply dummy text.
</div>
URL87
  • 10,667
  • 35
  • 107
  • 174
  • Does this help? https://css-tricks.com/fitting-text-to-a-container/ – Adam Jan 30 '23 at 14:49
  • 1
    @Adam good enough for my purpose, thanks ! – URL87 Jan 30 '23 at 15:36
  • Does this answer your question? [How to make font-size relative to parent div?](https://stackoverflow.com/questions/30693928/how-to-make-font-size-relative-to-parent-div) – Garv Jan 30 '23 at 16:57

1 Answers1

0
.section {
  width: 50px;
  height: 150px;
  border: 1px solid red;
  font-size: 3vw; 
  overflow: hidden;
}

You can adjust the values to find the right balance between font size and div size

RockYou
  • 21
  • 5