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</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/