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>

Improve this question
3

1 Answer 1

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.