Is it possible to shrink the font size in case of an overflow?

Question

The overflow attribute allows to hide the content not fitting in the bounding box or it is possible to show scroll bars to scroll the content through a smaller view port.

But is it also possible to shrink the font size of the child to prevent an overflow?

In general it would be no option to shrink the text size, but I use Unicode pictographs with font size of 300%. And in this case it would be acceptable to shrink the font size down to 100%.

Is it possible to detect an overflow?

Answer 1

Yes, it is. I am currently developing a web application without any framework / library where I had to meet a similar requirement. In my case, I was not allowed to change the font size, but I had to shorten a possibly long string until it fitted.

I will shortly explain my solution, but don't have the code at hands right now. I am sure you can easily adapt my solution to your needs.

For me, the key to being able to measure the text width was to put the text into a <span>. I don't know any method to measure the width of a text directly, but the width of a span can be measured easily:

/* Let 'spanid' be the id of the span containing the text */
width_of_text = document.getElementById("spanid").offsetWidth;

Then compare that width with that of the containing element (which I assume is just the parent element):

width_of_containing_element = document.getElementById("spanid").parentNode.clientWidth;

Now you have the width of the text and the width of its containing element and can compare them easily.

I have tested this in Firefox (most recent desktop version), Chrome (most recent desktop version) and IE11. I did not test it in Edge yet, but I am quite sure that it will work there as well.

This solution only takes horizontal overflow into account. I did not test if vertical overflow can be detected with the same method (but after thinking about it for some seconds: why not?).