Make font smaller if there is big text

Question

I have div and within that div text is displayed

<div class="td">
  <div class="title main-color">test text</div>
</div>

but if there is big text it goes outside of div. I want to make that if there's big text font to become smaller. How can I achieve that?

JSFIDDLE is here

P.S. I don't want div to grow in height

Possible duplicate of [Auto-size dynamic text to fill fixed size container](http://stackoverflow.com/questions/687998/auto-size-dynamic-text-to-fill-fixed-size-container) — ssc-hrep3, Feb 13 '17 at 12:58
You could use [jQuery textfill](http://jquery-textfill.github.io/). — ssc-hrep3, Feb 13 '17 at 13:00
you could instead add a scroll using `overflow-y:auto;` to the div if you don't want to change the height of the `div` — Ikhlak S., Feb 13 '17 at 13:01

Manish Jesani · Answer 1 · 2017-02-13T13:14:35.270

Demo https://jsfiddle.net/qjgjg2vh/

Html

<div class="td">
<div class="title main-color">test text</div>
</div>

<div class="td">
<div class="title main-color">test text is bigger now and goes outside of div and dont appears</div>
</div>

CSS

.main-color {
    opacity: 0.6;
    background: #ffffff;
}

.title {
    height: 100%;
    width: 470px;
    border-radius: 20px;
    float: left;
    text-align: center;
    line-height: 100px;
    font-size: 26px;
    overflow: hidden;
}

.td {
    margin: 60px 0;
    height: 100px;
    width: 100%;
}

JQUERY

Your original code was getting the character count for ALL paragraphs that matched '.question p'. e.g. If you had two paragraphs, one with ten characters, the other with twenty characters, your JS would run once with a total of thirty, rather than processing each paragraph in turn.

$(function($){
    $(".title.main-color").each(function () {
        var numChars = $(this).text().length;     
        if ((numChars >= 1) && (numChars < 20)) {
            $(this).css("font-size", "2.2em");
        }
        else if ((numChars >= 20) && (numChars < 60)) {
            $(this).css("font-size", "1.8em");
        }
        else if ((numChars >= 60) && (numChars < 100)) {
            $(this).css("font-size", "1em");
        }
        else if ((numChars >= 100) && (numChars < 140)) {
            $(this).css("font-size", "0.9em");
        }
        else {
            $(this).css("font-size", "0.8em");
        }           
    });
});

@gsiradze No problem, glad I could help! – Manish Jesani Feb 13 '17 at 13:29 — Manish Jesani, Feb 13 '17 at 13:29

score 0 · Answer 2 · answered Feb 13 '17 at 13:17

You can use javaScript and make the font size smaller and smaller till the time the height of child element with the text fits the height of parent element. I also added visibility:hidden for the text and visibility:visible after fontSize decrease in order to get rid of flashing effect. Remember to put the text into extra element, eg. span. Change the text length to see the effect.

var samp = document.getElementById('samp');

fitFont(samp);


function fitFont(elem){
  var child = elem.children[0];
  var getFontSize = parseFloat(window.getComputedStyle(child).getPropertyValue('font-size'));
    
  while(child.offsetHeight>elem.clientHeight){
    getFontSize -= .1;
    child.style.fontSize = getFontSize + 'px';
  }
  child.style.visibility = 'visible';
}

#samp {
  background-color:white;
  width:300px;
  height:100px;
  border:solid 2px #33aaff;
}

#samp span {
  display: inline-block;
  visibility:hidden;
  font-size:50px;
}

<div id="samp">
  <span>test text is bigger now and goes outside of div and dont appears test text is bigger now and goes outside of div and dont appears test text is bigger now and goes outside of div and dont appears
  </span>
</div>

score 0 · Answer 3 · edited Aug 31 '23 at 02:17

Of course you could aim for a javascript solution count the letters/words and adjust the font-size accordingly.

$(function() {

    var $title= $(".title");
    
    var $numWords = $title.text().split(" ").length;
    
    if (($numWords >= 1) && ($numWords < 10)) {
        $quote.css("font-size", "36px");
    }
    else if (($numWords >= 10) && ($numWords < 20)) {
        $title.css("font-size", "32px");
    }
    else if (($numWords >= 20) && ($numWords < 30)) {
        $title.css("font-size", "28px");
    }
    else if (($numWords >= 30) && ($numWords < 40)) {
        $title.css("font-size", "24px");
    }
    else {
        $title.css("font-size", "20px");
    }    
    
});

But if you want to use something without Javascript you could do a couple of things. Unfortunately changing the font-size based on text-length is not possible with css.

Alternatives:

Use a horizontal scrollbar: overflow-x: scroll;
Make the box larger in any dimension: https://jsfiddle.net/zjaq98Ln/10/
Show the overflow of text (probably not ideal).
Use text-overflow: https://jsfiddle.net/zjaq98Ln/9/

score -2 · Accepted Answer · edited Sep 21 '21 at 12:47

Try this

.main-color {
  opacity: 0.6;
  background: #ffffff;
}

.title {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 470px;
  border-radius: 20px;
  float: left;
  line-height: 30px;
  font-size: 26px;
}

.td {
  margin: 60px 0;
  height: 100px;
  width: 100%;
}

<div class="td">
    <div class="title main-color">test text</div>
    </div>
    <div class="td">
    <div class="title main-color">test text is bigger now, goes outside of div and doesn't appear</div>
</div>

Live demo here: https://jsfiddle.net/grinmax_/zjaq98Ln/11/

Make font smaller if there is big text

4 Answers4

Alternatives: