My goal is to dynamically render text within a div at the largest possible size to fit its width and height. While I've successfully adjusted the width, I'm encountering difficulties with the height. Certain characters like 'y', 'g', and 'q' are extending beyond the boundaries of the parent element.
To better illustrate my issue, you can refer to this fiddle: https://jsfiddle.net/xvp7jgy1/6/
Here’s the HTML setup:
<div>
<span>Country</span>
</div>
And here's the CSS styling:
div {
height: 60px;
width: 300px;
margin: 20px;
background-color: #ff0012;
font-size: 60px; /* matching height */
}
I aim to ensure that all text remains contained within the borders of the parent element.
UPDATE:
Note that the dimensions of the div may vary in other scenarios, so any solution should be adjustable to accommodate different sizes.