I can't figure out how to create text that will automatically adjust its size to perfectly fit the page, ensuring that different word groupings always take up the entire width of various screen sizes.
Currently browsing on a phone, so please forgive me for not providing full HTML examples. Here are some common scenarios I'm trying 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 with different text here ...
</div>
<div>
... and another ...
</div>
</div>
In total, the layout above would span exactly three lines across any screen or window size.
A more basic example:
<h1>Hello World</h1>
In this case, the h1 would span the full width of the screen (easy), but the text content itself should expand to fill 100% of the screen as well.
Some similar techniques I am familiar with:
Font-stretch // although it distorts the text without considering the container
Font-size:5%; // which deals with the vertical scale of each letter
text-align:justify; // though it only adds space rather than scaling up the font