resize font-size to fit content when there overflow

Question

I want resize the text to fit content when the text overflow on the container. the same container with same width and height but the text more little if this is overflow the container.

I searched many jquery plugins but the plugins only resizing text when the width container is resizing...

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) — Jaffer Wilson, Jun 10 '15 at 09:22
what? this solution resize depend of width, this solution not solve my problem.... — Kappys, Jun 10 '15 at 09:29

score 2 · Accepted Answer · answered Jun 10 '15 at 08:57

You could do a while loop to run until the height of an inner element is smaller than the parent element, like so:

http://jsfiddle.net/yod3s5vm/3/

var intMainHeight = $('#main').height();
var intTextHeight = $('#text').height();
var intFontSize = parseInt($('#text').css('font-size'));
while (intTextHeight > intMainHeight) {
    --intFontSize;
    $('#text').css('font-size', intFontSize+ 'px');
    intMainHeight = $('#main').height();
    intTextHeight = $('#text').height();
}

* {
    box-sizing:border-box;
}
#main {
    height:200px;
    width:400px;
    border:1px solid black;
    padding:5px;
    background:#eee;
}
#text {
    font-size:30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
    <div id="text">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>    
</div>

resize font-size to fit content when there overflow

1 Answers1