Make Text Stretch 100%

Question

So, I said this might be possible to my client, and i said I'd research it and let him know. Anyways, with JS or a CSS hack, is it possible to make text stretch 100% of the window? What i mean by this is, how can I make the title of his site, no matter the window size, fit exactly 100% inside the window by dynamically changing the font size to equal the same width?

I'm currently attempting to make a hidden span with a O inside and dynamically pulling the size of the span holding the O and seeing if it changes and if so resizes the font based on some specific size. It's super hacky, and isn't bulletproof, so that's why Im asking.

Answer 1

Lay it out as a <span> without consideration for the Window width; after it loads, query the element's width, and scale the font-size up by windowwidth/spanwidth (to avoid rounding issues, multiply the default font size by windowwidth, then divide the result by spanwidth, or doing everything using floating-point arithmetic).

Answer 2

This all sounds like allot of work for little gain but the only way that comes to my mind is, you could first detect screen size with javascript and build a style sheet for each?

But will kind of all get messy if user resizes screen.