Stretching text navigational elements 100% across the screen with css

I'm drawing a blank at how to make text dynamically grow and shrink to always fit a page perfectly so that various word groups always take up the full width of various screen sizes.

I'm on a phone browser right now, so excuse me if I don't post full html examples, but here is the gist of common scenarios that I'm trying to have a technique to resolve:

<div>
<div>
<a>nav element</a> <a>another&l开发者_开发百科t;/a><a>lots of text in this nav element</a>
</div>
<div>
 ... another set of links wwith different text here ... 
</div>
<div>
... and another ...
</div>

</div>

All told, the above layout would take up exactly three lines all the way across the screen on any screensize or window size.

A simpler example:

<h1>Hello World</h1>

Wherein not only would the h1 have a width of 100% of the screen (easy) but the text content itself would grow in font-size to fit 100% of the screen.

Similar techniques that I am aware of:

Font-stretch // except it just squashes/stretches text without regard for the text containers

Font-size:5%; // except this deals with the vertical scale of each letter.

text-align:justify; // except it just adds space instead of scaling up the font.

I'm not aware of a pure CSS way to accomplish this. I believe you have to use JS. There's several scripts and plugins out there for that. Here's one for jQuery:

http://fittextjs.com/

Media queries is probably the closest thing that exists to what you are looking for. Another good term to search for is "Responsive Design", its been a fairly hot topic on most of the designer blogs I follow in the last few months.

You can't. Not with css.

Sorry.

You can probably program something with javascript.