JavaScript

JavaScript: Resizing text to fit in a container

Learn how to dynamically resize text to fit any container using a simple recursive jQuery script. Perfect for handling large datasets in web design.

Metal Toad Staff
Jul 30, 2012
This span is too big for this div

This is a simple problem and a simple solution. Often in the world of dynamic data we find ourselves with data that is larger than the container. There are ways of handling this like a scrolling div or adding ellipses to chopped of text, but what if you absolutely must see all of the text and are willing to change to font size to accomplish this? Using this little recursive jQuery snippet you can accomplish this.

function adjustHeights(elem) {
var fontstep = 2;
if ($(elem).height()>$(elem).parent().height() || $(elem).width()>$(elem).parent().width()) {
$(elem).css('font-size',(($(elem).css('font-size').substr(0,2)-fontstep)) + 'px').css('line-height',(($(elem).css('font-size').substr(0,2))) + 'px');
adjustHeights(elem);
}
}

Here's the same div as above with the script applied:

This span is too big for this div

You can modify the fontstep variable to resize at a faster rate if you want. I find that resizing in increments of two makes the most sense. That's all there is to it. Enjoy.

EDIT: I added a bit of a timeout to give the webfont time to load first...
JavaScript

Similar posts

Drupal

Learning the Metal Toad Way

Stay current with front-end development trends using these recommended blogs, podcasts, and newsletters from Metal Toad experts.

Metal Toad Staff Jul 13, 2012

Get notified on new marketing insights

Be the first to know about new B2B SaaS Marketing insights to build or refine your marketing function with the tools and knowledge of today’s industry.