I am attempting to fit some dynamic text right into a defined box on my small Wordpress site. I have looked into while using following two scripts:

With both I am obtaining the same results the text entering the boxes (an excellent start) however the text doesn't wrap nor will it appear to scale based on the available size as suggested for the stylesheet.

The written text is really a link in the div. This is actually the code for that div within the index.php file of Wordpress:

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div id="id<?php echo get_post_meta($post->ID, "blipclass", true); ?>" class="<?php echo get_post_meta($post->ID, "blipclass", true); echo " "?>blip storycontent frontp news-post">
        <a href="<?php echo the_permalink(); ?>" class="bliptext"><?php echo get_post_meta($post->ID, "blip", true); ?></a>
        <script type="text/javascript">fitTextInBox('id<?php echo get_post_meta($post->ID, "blipclass", true); ?>',136);</script>
    </div>
</div>

and relevant areas of my stylesheet

#idblip-c, #idblip-m, #idblip-y, #idblip-k, {
        width: 218px !important;
        height: 136px !important;
        overflow: auto !important;
}

.bliptext {
        padding:10px;
        padding-top:15px;
        width:100%;
        height:100%;
        overflow: auto !important;
}

Essentially, I must begin to see the front size change in line with the space within the box. The less words the larger the font and the other way around.

Here's where I am at at this time:

http://i.stack.imgur.com/TJoWZ.png

as you can tell, the font dimensions are maxing out and isn't wrapping. I recieve this far using either script.

Any tips about the problem is greatly appreciated.

more from the CSS

#idblip-c, #idblip-m, #idblip-y, #idblip-k, {
        width: 218px !important;
        height: 136px !important;
        overflow: auto !important;

HTML output

        <div class="frontpics">
                                                <div id="post-1831" class="post-1831 post type-post status-publish format-standard hentry category-news">
                            <div id="idblip-c" class="blip-c blip storycontent frontp news-post">
                                <a href="story1/" class="bliptext">HE NEVER STOPS, EVER!</a>
                                <script type="text/javascript">fitTextInBox('idblip-c',136);</script>
                            </div>
                        </div>
                                                <div id="post-1649" class="post-1649 post type-post status-publish format-standard hentry category-news">

                            <div id="idblip-m" class="blip-m blip storycontent frontp news-post">
                                <a href="story2/" class="bliptext">FIRST PLACE</a>
                                <script type="text/javascript">fitTextInBox('idblip-m',136);</script>
                            </div>
                        </div>
                                                <div id="post-1826" class="post-1826 post type-post status-publish format-standard hentry category-news tag-caen tag-france tag-klar tag-masterplan">
                            <div id="idblip-y" class="blip-y blip storycontent frontp news-post">
                                <a href="story3/" class="bliptext">MASTER OF THE UNIVERSE</a>

                                <script type="text/javascript">fitTextInBox('idblip-y',136);</script>
                            </div>
                        </div>
                                                <div id="post-1820" class="post-1820 post type-post status-publish format-standard hentry category-news">
                            <div id="idblip-k" class="blip-k blip storycontent frontp news-post">
                                <a href="story4/" class="bliptext">CONTEMPORARY SHT</a>
                                <script type="text/javascript">fitTextInBox('idblip-k',136);</script>

                            </div>
                        </div>
                                        </div>
            </div>