jQuery-Plugin – fit2Box

[Update] There was an error using more than one box and class selectors. It is fixed now (thanks @Justin) [/Update]

Sometimes, you have the design problem that you want to fit a text into a given box. If the text is small, the font-size should be bigger. If the text is big, the font-size should be smaller.

For this problem, I have written a jQuery-Plugin: You have to put your text into a block element (p.e. a div-element) and to specify width and height of this box. Additionally you have to set an initial font-size in “px”

#testBox {
  width: 400px;
  height: 50px;
  font-size: 20px;

Now, you only have to call the fit2Box function:


You can view a demo and download the code. Have fun!

The code is tested on

  • Internet Explorer 6.0
  • Internet Explorer 7.0
  • Firefox 2.0
  • Opera 9

7 Gedanken zu „jQuery-Plugin – fit2Box

  1. Good plugin. It could be a great plug-in if you could get it to work with out having to specify the height and width.

    It would be an even greater plugin if once the text shrunk to a minimum font-size, the text would wrap and then get blown back up to fill two lines.

    I believe Mike Davidson’s SiFR 2.0 does some of this.

  2. Congratulations for this plugin. After scanned an account bill I’m using Adobe Fireworks(slice tool) to build an HTML output with one for every sliced piece. Crazy! After that I’ll cut all images for that table. Only matters the width and height for them. That width and height are appended to every tag.
    My CF application needs to fill every field that table with several data. This data needs to conform with your without wrap for a new line. Fit2Box could be a good option?

  3. I agree Italo doesn’t understand what the plugin is doing.

    I think it would help if the demo was better – I suggest that you make the DIV resizable with the mouse, so that people can manipulate its dimensions and watch the text change to fit accordingly.

    I also think that the plugin shouldn’t require the font-size to be set in pixels first, can’t it do this itself?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.