How to scale text size compared to container

Question

How would you scale text size based on container size. Other questions state it can\'t be done with css, if not how would you go about it?

Answer 1

Here is a way to set the text to fit the width of the container. It works by incrementally increasing the font size of a hidden div until it is smaller than the width of the container for which you want to text to fit inside. It then sets the font size of the container to that of the hidden div.

This is a little inefficient and could be optimized by caching the old width of the container, then incrementing from the old font size to either larger or smaller values based on how the width of the container changed.

jsFiddle: http://jsfiddle.net/sarathijh/XhXQk/

    This is a test of scaling text to fit the container. Lorem Ipsum Dolor Sit Amet.