JavaScript: Resizing text to fit in a container

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

Filed under:

Comments

Are there other options for delaying the resize, since there's no way to predict when the font will load? Perhaps Google's Web Font Loader could help (it offers a setOnLoadCallback() event).

The logic seems a little off, if the font size gets below 10 I think you'll end up in an infinite loop. A minimum size or depth limit on the recursion might be useful.

Right on all counts. The web font issue didn't come up for me when I developed this as the font was on the same server. The possible infinite loop is just sloppy.

very good article, thank you :)

Any solutions for waiting for the web font to load? Looking to use this on mobile so I get a bit worried about how long it might take to load certain elements.

Thanks for writing this up, the code makes a lot of sense

total newb trying to figure this out...should i replace the id of my element everywhere this says "elem"? is this a variable that is being declared for the function adjustHeights? thx!

By putting up a thought into buying gift for a friend's child, you are
teaching your own child the importance of sentiment and
the heart that goes into it rather than just how much money you spent.
Usually, army officers impart knowledge about the different equipments and strategies to their
children right from the age of 4 or 5. You don't believe.

Also visit my web site: Slitherio Hack Tool Free

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <cpp>, <java>, <php>. The supported tag styles are: <foo>, [foo].
  • Web page addresses and email addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Ready for transformation?