Font Fits Parent Div

from http://css-tricks.com/forums/topic/is-it-possible-to-adapt-font-size-to-div-width/

by kalmarsh80

HTML

<div id="sidebar">
    <span>fits the width of the parent</span>

    <br> <span>Hello</span>

    <br>	<span>my</span>

    <br>	<span>name</span>

    <br>	<span>is</span>

    <br>	<span>john</span>

    <br>	<span>1</span>

    <br>	<span>23</span>

    <br>	<span>456</span>

    <br>	<span>12345678910</span>

    <br>	<span>the font size in the span adjusts to the width</span>

    <br>
</div>

CSS

#sidebar {
    background: #333;
    color: #fff;
    width: 250px;
    font-size: 12px;
}

JavaScript

$(document).ready(function () {
    var originalFontSize = 12;
    var sectionWidth = $('#sidebar').width();

    $('#sidebar span').each(function () {
        var spanWidth = $(this).width();
        var newFontSize = (sectionWidth / spanWidth) * originalFontSize;
        $(this).css({
            "font-size": newFontSize,
                "line-height": newFontSize / 1.2 + "px"
        });
    });
});