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

user_402322 0
Viewed 5270

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?

overflow css javascript
4 Answers

You can not determine overflow in css. I can think of two ways to implement this.

  1. If you know the screen size or screen resolution when you want to switch the font size, then you can use media queries e.g.

    div {
    @media screen and (max-width: 800px) {
        font-size: 30%;
    }
    @media screen and (min-width: 801px) {
        font-size: 20%;
    }
}

  2. In second case i.e. if you don't have a specific condition then we need to determine the overflow using javascript. You can check overflow using something like

    if ($('overflowingDiv').width() > $('container').width()) {
    $('overflowingDiv').css('font-size', '20%');
}
user_71888580

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?).

user_32398420

Check the offsetHeight and offsetWidth to see if they are smaller than the scrollHeight and scrollWidth:

<style>
div {
  width: 10px;
  height: 10px;
  overflow: hidden;
}
</style>
<script>
  window.onload = function() {
    var d = document.getElementsByTagName("div")[0]
    if (d.offsetHeight < d.scrollHeight ||
        d.offsetWidth < d.scrollWidth) {
      console.log("overflow");
    } else {
      console.log("no overflow");
    }
  }
</script>
<div>
some text
</div>
user_3638690

You can use document.getElementsByTagName or document.getElementsByClassName, etc, and check if the element has scroll, checking the property scrollHeight. Like this:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test overflow</title>

    <style>
        p {
            width: 150px;
            height: 60px;
            overflow: auto;
            font-size: 300%;
        }
    </style>
</head>
<body>

    <p>
        Lorem ipsum dolor sit amet,
    </p>
    <p>
        Lorem
    </p>


    <script>
        let pr = document.getElementsByTagName('p');

        let i = 0;
        for( i; i < pr.length; i++ ){
            if( pr[i].scrollHeight - pr[i].clientHeight > 0 ) { // overflow
                pr[i].style.fontSize = '100%';
            }
            else {
                pr[i].style.fontSize = '300%';
            }
        }
    </script>
</body>

user_65387120
Related