cool tech graphics

JavaScript: Resizing text to fit in a container

Filed under:

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');

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

Date posted: July 30, 2012


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

Use the tool mentioned by Dylan in comment #2

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!

elem = elem instanceof jQuery? elem : $(elem);

in the beginning and it's immediately much simpler code.

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.

Metal Toad is an Advanced AWS Consulting Partner. Learn more about our AWS Managed Services

Schedule a Free Consultation

Speak with our team to understand how Metal Toad can help you drive innovation, growth, and success.