CSS: Set font to a size so the text would occupy whole container [duplicate]

Question

Possible Duplicate:
resize font to fit in a div (on one line)

For a small flashcard maker app I need to set the correct font size so text would fill all the available width of a fixed-size container; like the text in the four boxes in this picture:

A solution using PHP GD has been provided to this question. Is there a client side solution with css or javascript to this problem?

Answer 1

it's not brute force ;)

HTML:

<span id="txt">Lorem</span>
<div id="card"></div>

CSS:

#card { 
    width: 150px; 
    height: 50px;
    border: 1px solid black 
}

#txt {
    display: none
}

JS (using JQuery):

var size_w = (150/$('#txt').width() - 0.05);
var size_h = (50/$('#txt').height() - 0.05);
var size = size_w>size_h?size_h:size_w;
$('#card').css('font-size',  size + 'em');
$('#card').text($('#txt').text());

fiddle here: http://jsfiddle.net/cwfDr/

All right, now it covers both height and width. ;)

Answer 2

I wrote this tiny, tiny plugin to do it to fit the browser window.

            (function($){
                $.fn.extend({ 
                    sizeFont: function() {
                        return this.each(function() {
                            $obj = $(this);
                            $obj.css({fontSize:($(window).width()/$obj.width())+'em'});
                        });
                    }
                });
            })(jQuery);

I'm sure you can modify this to fit your needs by switching $(window) to whatever you want. Here is it live:

http://cullywright.com/