Auto-size dynamic text to fill fixed size container

Question

I need to display user entered text into a fixed size div   What i want is for the font size to be automatically adjusted so that the text fills the box as much as possible   So - If the div is 400px x 300px   If someone enters ABC then it s really big font   If they enter a paragraph  then it would be a tiny font   I d probably want to start with a maximum font size - maybe 32px  and while the text is too big to fit the container  shrink the font size until it fits

User · Accepted Answer

Thanks Attack  I wanted to use jQuery    You pointed me in the right direction  and this is what I ended up with   Here is a link to the plugin  https   plugins jquery com textfill  And a link to the source  http   jquery-textfill github io     function            fn textfill   function options            var fontSize   options maxFontPixels          var ourText      span visible first   this           var maxHeight     this  height            var maxWidth     this  width            var textHeight          var textWidth          do               ourText css  font-size   fontSize               textHeight   ourText height                textWidth   ourText width                fontSize   fontSize - 1            while   textHeight  gt  maxHeight    textWidth  gt  maxWidth   amp  amp  fontSize  gt  3           return this           jQuery      document  ready function             jtextfill   textfill   maxFontPixels  36           and my html is like this   lt div class  jtextfill  style  width 100px height 50px   gt       lt span gt My Text Here lt  span gt   lt  div gt    This is my first jquery plugin  so it s probably not as good as it should be  Pointers are certainly welcome

User · Answer

I ve created a directive for AngularJS - heavely inspired by GeekyMonkey s answer but without the jQuery dependency   Demo  http   plnkr co edit 8tPCZIjvO3VSApSeTtYr p preview  Markup   lt div class  fittext  max-font-size  50  text  Your text goes here     gt  lt  div gt   Directive  app directive  fittext   function        return       scope          minFontSize             maxFontSize             text                 restrict   C       transclude  true      template    lt div ng-transclude class  textContainer  ng-bind  text  gt  lt  div gt        controller  function  scope   element   attrs          var fontSize    scope maxFontSize    50        var minFontSize    scope minFontSize    8            text container       var textContainer    element 0  querySelector   textContainer           angular element textContainer  css  word-wrap    break-word              max dimensions for text container       var maxHeight    element 0  offsetHeight        var maxWidth    element 0  offsetWidth         var textContainerHeight        var textContainerWidth               var resizeText   function            do                set new font size and determine resulting dimensions           textContainer style fontSize   fontSize    px             textContainerHeight   textContainer offsetHeight            textContainerWidth   textContainer offsetWidth                shrink font size           var ratioHeight   Math floor textContainerHeight   maxHeight             var ratioWidth   Math floor textContainerWidth   maxWidth             var shrinkFactor   ratioHeight  gt  ratioWidth   ratioHeight   ratioWidth            fontSize -  shrinkFactor             while   textContainerHeight  gt  maxHeight    textContainerWidth  gt  maxWidth   amp  amp  fontSize  gt  minFontSize                              watch for changes to text        scope  watch  text   function newText  oldText           if newText     undefined  return              text was deleted         if oldText     undefined  amp  amp  newText length  lt  oldText length             fontSize    scope maxFontSize                    resizeText

User · Answer

The proposed iterative solutions can be sped up dramatically on two fronts   1  Multiply the font size by some constant  rather than adding or subtracting 1   2  First  zero in using a course constant  say  double the size each loop   Then  with a rough idea of where to start  do the same thing with a finer adjustment  say  multiply by 1 1   While the perfectionist might want the exact integer pixel size of the ideal font  most observers don t notice the difference between 100 and 110 pixels   If you are a perfectionist  then repeat a third time with an even finer adjustment   Rather than writing a specific routine or plug-in that answers the exact question  I just rely on the basic ideas and write variations of the code to handle all kinds of layout issues  not just text  including fitting divs  spans  images     by width  height  area     within a container  matching another element      Here s an example     var                           nWindowH px               jQuery window  height      var                           nWas                      0    var                           nTry                      5     do     nWas   nTry     nTry    2     jQuery   divTitle   css  font-size   nTry   px       while  jQuery   divTitle   height    lt  nWindowH px       nTry   nWas     do     nWas   nTry     nTry   Math floor  nTry   1 1       jQuery   divTitle   css  font-size   nTry   px       while  nWas    nTry    amp  amp    jQuery   divTitle   height    lt  nWindowH px       jQuery   divTitle   css  font-size   nWas   px

User · Answer

Here s my modification of the OP s answer   In short  many people who tried to optimize this complained that a loop was being used  Yes  while loops can be slow  other approaches can be inaccurate   Therefore  my approach uses Binary Search to find the best Font Size     fn textfill   function         var self     this       var parent   self parent         var attr   self attr  max-font-size        var maxFontSize   parseInt attr  10       var unit   attr replace maxFontSize            var minFontSize   parseInt self attr  min-font-size   replace unit            var fontSize    maxFontSize   minFontSize    2       var maxHeight   parent height        var maxWidth   parent width         var textHeight      var textWidth       do               self css  font-size   fontSize   unit            textHeight   self height            textWidth   self width             if textHeight  gt  maxHeight    textWidth  gt  maxWidth                        maxFontSize   fontSize              fontSize   Math floor  fontSize   minFontSize    2                     else if textHeight  lt  maxHeight    textWidth  lt  maxWidth                        minFontSize   fontSize              fontSize   Math floor  fontSize   maxFontSize    2                     else             break             while maxFontSize - minFontSize  gt  1  amp  amp  maxFontSize  gt  minFontSize        self css  font-size   fontSize   unit        return this     function resizeText           textfill   textfill         document  ready resizeText     window  resize resizeText     This also allows the element to specify the minimum and maximum font    lt div class  container  gt       lt div class  textfill  min-font-size  10px  max-font-size  72px  gt          Text that will fill the container  to the best of its abilities  and it will  lt i gt never lt  i gt  have overflow       lt  div gt   lt  div gt    Furthermore  this algorithm is unitless  You may specify em  rem     etc  and it will use that for its final result   Here s the Fiddle  https   jsfiddle net fkhqhnqe 1

User · Answer

Here s an improved looping method that uses binary search to find the largest possible size that fits into the parent in the fewest steps possible  this is faster and more accurate than stepping by a fixed font size   The code is also optimized in several ways for performance   By default  10 binary search steps will be performed  which will get within 0 1  of the optimal size  You could instead set numIter to some value N to get within 1 2 N of the optimal size   Call it with a CSS selector  e g   fitToParent   title-span            Fit all elements matching a given CSS selector to their parent elements     width and height  by adjusting the font-size attribute to be as large as    possible  Uses binary search      var fitToParent   function selector        var numIter   10      Number of binary search iterations     var regexp     d     d          var fontSize   function elem            var match   elem css  font-size   match regexp           var size   match    null   16   parseFloat match 0            return isNaN size    16   size              selector  each function             var elem     this           var parentWidth   elem parent   width            var parentHeight   elem parent   height            if  elem width    gt  parentWidth    elem height    gt  parentHeight                var maxSize   fontSize elem   minSize   0 1              for  var i   0  i  lt  numIter  i                      var currSize    minSize   maxSize    2                  elem css  font-size   currSize                   if  elem width    gt  parentWidth    elem height    gt  parentHeight                        maxSize   currSize                    else                       minSize   currSize                                              elem css  font-size   minSize

User · Answer

This is the most elegant solution I have created  It uses binary search  doing  10 iterations  The naive way was to do a while loop and increase the font size by 1 until the element started to overflow  You can determine when an element begins to overflow using element offsetHeight and element scrollHeight  If scrollHeight is bigger than offsetHeight  you have a font size that is too big   Binary search is a much better algorithm for this  It also is limited by the number of iterations you want to perform  Simply call flexFont and insert the div id and it will adjust the font size between 8px and 96px   I have spent some time researching this topic and trying different libraries  but ultimately I think this is the easiest and most straightforward solution that will actually work   Note if you want you can change to use offsetWidth and scrollWidth  or add both to this function      Set the font size using overflow property and div height function flexFont divId        var content   document getElementById divId       content style fontSize   determineMaxFontSize content  8  96  10  0     px          Use binary search to determine font size function determineMaxFontSize content  min  max  iterations  lastSizeNotTooBig        if  iterations     0            return lastSizeNotTooBig            var obj   fontSizeTooBig content  min  lastSizeNotTooBig           if  min  too big      min     max              search between  avg min  lastSizeTooSmall    min         if  min  too small  search between  avg min max   max         keep track of iterations  and the last font size that was not too big     if  obj tooBig             lastSizeTooSmall     -1                determineMaxFontSize content  min   2  min  iterations - 1  obj lastSizeNotTooBig  lastSizeTooSmall                    determineMaxFontSize content   min   lastSizeTooSmall    2  min  iterations - 1  obj lastSizeNotTooBig  lastSizeTooSmall          else           determineMaxFontSize content   min   max    2  max  iterations - 1  obj lastSizeNotTooBig  min               determine if fontSize is too big based on scrollHeight and offsetHeight      keep track of last value that did not overflow function fontSizeTooBig content  fontSize  lastSizeNotTooBig        content style fontSize   fontSize    px       var tooBig   content scrollHeight  gt  content offsetHeight      return           tooBig  tooBig          lastSizeNotTooBig  tooBig   lastSizeNotTooBig   fontSize

User · Answer

Here is another version of this solution   shrinkTextInElement   function el  minFontSizePx        if  minFontSizePx            minFontSizePx   5            while el offsetWidth  gt  el parentNode offsetWidth    el offsetHeight  gt  el parentNode offsetHeight             var newFontSize    parseInt el style fontSize  10  - 3           if newFontSize  lt   minFontSizePx                break                     el style fontSize   newFontSize    px

User · Answer

I forked the script above from Marcus Ekwall  https   gist github com 3945316 and tweaked it to my preferences  it now fires when the window is resized  so that the child always fits its container  I ve pasted the script below for reference    function            fn textfill   function maxFontSize            maxFontSize   parseInt maxFontSize  10           return this each function                var ourText      span   this               function resizefont                    var parent   ourText parent                    maxHeight   parent height                    maxWidth   parent width                    fontSize   parseInt ourText css  fontSize    10                   multiplier   maxWidth ourText width                    newSize    fontSize  multiplier                    ourText css  fontSize   maxFontSize  gt  0  amp  amp  newSize  gt  maxFontSize   maxFontSize   newSize                                window  resize function                    resizefont                                resizefont                          jQuery

User · Answer

I have found a way to prevent the use of loops to shrink the text  It adjusts the font-size by multiplying it for the rate between container s width and content width  So if the container s width is 1 3 of the content  the font-size will be reduced by 1 3 and will container s width  To scale up  I have used a while loop  until content is bigger than container   function fitText outputSelector          max font size in pixels     const maxFontSize   50         get the DOM output element by its selector     let outputDiv   document getElementById outputSelector          get element s width     let width   outputDiv clientWidth         get content s width     let contentWidth   outputDiv scrollWidth         get fontSize     let fontSize   parseInt window getComputedStyle outputDiv  null  getPropertyValue  font-size   10          if content s width is bigger than elements width - overflow     if  contentWidth  gt  width           fontSize   Math ceil fontSize   width contentWidth 10           fontSize    fontSize  gt  maxFontSize    fontSize   maxFontSize    fontSize - 1          outputDiv style fontSize   fontSize  px           else             content is smaller than width    let s resize in 1 px until it fits          while  contentWidth     width  amp  amp  fontSize  lt  maxFontSize               fontSize   Math ceil fontSize    1              fontSize   fontSize  gt  maxFontSize    fontSize   maxFontSize    fontSize              outputDiv style fontSize   fontSize  px                     update widths             width   outputDiv clientWidth              contentWidth   outputDiv scrollWidth              if  contentWidth  gt  width                   outputDiv style fontSize   fontSize-1  px                                      This code is part of a test that I have uploaded to Github https   github com ricardobrg fitText

User · Answer

You can use FitText js  github page  to solve this problem  Is really small and efficient compared to TextFill  TextFill uses an expensive while loop and FitText don t    Also FitText is more flexible  I use it in a proyect with very special requirements and works like a champ     HTML    lt div class  container  gt     lt h1 id  responsive headline  gt Your fancy title lt  h1 gt   lt  div gt    lt script src  http   ajax googleapis com ajax libs jquery 1 jquery min js  gt  lt  script gt   lt script src  jquery fittext js  gt  lt  script gt   lt script gt    jQuery   responsive headline   fitText     lt  script gt    You also can set options to it    lt script gt    jQuery   responsive headline   fitText 1    minFontSize   30px   maxFontSize   90px      lt  script gt    CSS    responsive headline      width  100      display  block      And if you need it  FitText also has a no-jQuery version

User · Answer

This is based on what GeekyMonkey posted above  with some modifications      function            Resize inner element to fit the outer element    author Some modifications by Sandstrom    author Code based on earlier works by Russ Painter  WebDesign GeekyMonkey com     version 0 2      fn textfill   function options         options   jQuery extend           maxFontSize  null          minFontSize  8          step  1        options        return this each function              var innerElements     this  children   visible                fontSize   options maxFontSize    innerElements css  font-size       use current font-size by default             maxHeight     this  height                maxWidth     this  width                innerHeight              innerWidth           do                innerElements css  font-size   fontSize                   use the combined height of all children  eg  multiple  lt p gt  elements              innerHeight     map innerElements  function e                    return   e  outerHeight                   reduce function p  c                    return p   c                 0                innerWidth   innerElements outerWidth       assumes that all inner elements have the same width             fontSize   fontSize - options step             while   innerHeight  gt  maxHeight    innerWidth  gt  maxWidth   amp  amp  fontSize  gt  options minFontSize                    jQuery

User · Answer

I did like  let name    Making statements based on opinion  back them up with references or personal experience   let originFontSize   15  let maxDisplayCharInLine   50   let fontSize   Math min originFontSize  originFontSize    name length   maxDisplayCharInLine

User · Answer

Just wanted to add my version for contenteditables    x000D   x000D    fn fitInText   function     x000D    this each function     x000D   x000D      let textbox     this   x000D      let textboxNode   this  x000D   x000D      let mutationCallback   function mutationsList  observer    x000D        if  observer    x000D          observer disconnect    x000D          x000D        textbox css  font-size   0   x000D        let desiredHeight   textbox css  height    x000D        for  i   12  i  lt  50  i      x000D          textbox css  font-size   i   x000D          if  textbox css  height    gt  desiredHeight    x000D            textbox css  font-size   i - 1   x000D            break  x000D            x000D          x000D   x000D        var config     x000D          attributes  true  x000D          childList  true  x000D          subtree  true  x000D          characterData  true x000D           x000D        let newobserver   new MutationObserver mutationCallback   x000D        newobserver observe textboxNode  config   x000D   x000D         x000D   x000D      mutationCallback    x000D   x000D        x000D    x000D   x000D      inner   fitInText    x000D   outer   x000D    display  table  x000D    width  100   x000D    x000D   x000D   inner   x000D    border  1px solid black  x000D    height  170px  x000D    text-align  center  x000D    display  table-cell  x000D    vertical-align  middle  x000D    word-break  break-all  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt div id  outer  gt  x000D     lt div id  inner  contenteditable true gt  x000D      TEST x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Most of the other answers use a loop to reduce the font-size until it fits on the div  this is VERY slow since the page needs to re-render the element each time the font changes size  I eventually had to write my own algorithm to make it perform in a way that allowed me to update its contents periodically without freezing the user browser  I added some other functionality  rotating text  adding padding  and packaged it as a jQuery plugin  you can get it at   https   github com DanielHoffmann jquery-bigtext  simply call      text   bigText      and it will fit nicely on your container   See it in action here   http   danielhoffmann github io jquery-bigtext   For now it has some limitations  the div must have a fixed height and width and it does not support wrapping text into multiple lines   I will work on getting an option to set the maximum font-size   Edit  I have found some more problems with the plugin  it does not handle other box-model besides the standard one and the div can t have margins or borders  I will work on it   Edit2  I have now fixed those problems and limitations and added more options  You can set maximum font-size and you can also choose to limit the font-size using either width  height or both  I will work into accepting a max-width and max-height values in the wrapper element   Edit3  I have updated the plugin to version 1 2 0  Major cleanup on the code and new options  verticalAlign  horizontalAlign  textAlign  and support for inner elements inside the span tag  like line-breaks or font-awesome icons

User · Answer

I went with geekMonkey solution  but it s too slow  What he does  is he adjusts the font size to maximum  maxFontPixels  and then checks if it fits inside the container  else it reduces the font size by 1px and checks again  Why not simply check the previous container for the height and submit that value   yes  I know why  but I now made a solution  that only works on the height and also has a min max option   Here is a much quicker solution   var index letters resize   index letters resize   function           textfill   each function         var        this     this         height   Math min  Math max  parseInt   this height      40    150         this find   size-adjust   css         fontSize  height                  call       window  on  resize   function       index letters resize         and this would be the HTML    lt div class  textfill  gt     lt span class  size-adjust  gt adjusted element lt  span gt    other variable stuff that defines the container size  lt  div gt    Again  this solution ONLY checks for the height of the container  That s why this function does not has to check  if the element fits inside  But I also implemented a min max value  40min  150max  so for me this works perfectly fine  and also works on window resize

User · Answer

EDIT  This code was used to show notes on top of a HTML5 video  It changes the font-size on the fly when the video is resized  when the browser window is resized   The notes was connected to the video  just like notes on YouTube   which is why the code uses instances instead of a DOM handle directly   As per request I ll throw in some code that I used to achieve this   Text boxes over an HTML5 video   The code was written a long time ago  and I quite frankly think it s pretty messy  Since the question is already answered and an answer is already accepted a long time ago I don t bother rewriting this  But if anyone wants to simplify this a bit  you re more than welcome      Figure out the text size  var text   val  text    var letters   text length  var findMultiplier   function x       g x         By analysing some functions with regression  the resulting function that      gives the best font size with respect to the number of letters and the size      of the note is       g x    8 3 - 2 75x 0 15  1  lt  x  lt  255       f x    g letters     x   1000  0 5      Font size   f size              return 8 3 - 2 75   Math pow x  0 15       var findFontSize   function x       f x      return findMultiplier letters    Math pow x   1000  0 5       val setFontSizeListener   function         p style fontSize    1px      So the text should not overflow the box when measuring      var noteStyle   window getComputedStyle table       var width   noteStyle getPropertyValue  width        var height   noteStyle getPropertyValue  height        var size   width substring 0  width length - 2    height substring 0  height length - 2       p style fontSize   findFontSize size     px      window addEventListener  resize   val setFontSizeListener     You ll probably need to tweak these numbers from font-family to font-family  A good way to do this is download a free graph visualizer called GeoGebra  Change the length of the text and the size of the box  Then you manually set the size  Plot the manual results into the coordinate system  Then you enter the two equations I ve posted here and you tweak the numbers until  my  graph fits your own manually plotted points

User · Answer

I had exactly the same problem with my website  I have a page that is displayed on a projector  on walls  big screens    As I don t know the max size of my font  I re-used the plugin above of  GeekMonkey but incrementing the fontsize      fn textfill   function options            var defaults     innerTag   span   padding   10             var Opts   jQuery extend defaults  options            return this each function                 var ourText     Opts innerTag     visible first   this               var fontSize   parseFloat ourText css  font-size   10               var doNotTrepass     this  height  -2 Opts padding               var textHeight               do                   ourText css  font-size   fontSize                   textHeight   ourText height                    fontSize   fontSize   2                while  textHeight  lt  doNotTrepass

User · Answer

I didn t find any of the previous solutions to be adequate enough due to bad performance  so I made my own that uses simple math instead of looping  Should work fine in all browsers as well   According to this performance test case it is much faster then the other solutions found here    function            fn textfill   function maxFontSize            maxFontSize   parseInt maxFontSize  10           return this each function                var ourText      span   this                   parent   ourText parent                    maxHeight   parent height                    maxWidth   parent width                    fontSize   parseInt ourText css  fontSize    10                   multiplier   maxWidth ourText width                    newSize    fontSize  multiplier-0 1                ourText css                   fontSize                     maxFontSize  gt  0  amp  amp  newSize  gt  maxFontSize                         maxFontSize                        newSize                                      jQuery     If you want to contribute I ve added this to Gist

User · Answer

I got the same problem and the solution is basically use javascript to control font-size   Check this example on codepen    https   codepen io ThePostModernPlatonic pen BZKzVR  This is example is only for height  maybe you need to put some if s about the width      try to resize it     lt  doctype html gt   lt html gt   lt head gt   lt meta charset  utf-8  gt   lt title gt Documento sem t  tulo lt  title gt   lt style gt   lt  style gt   lt  head gt   lt body gt   lt div style  height 100vh background-color  tomato   id  wrap  gt             lt h1 class  quote  id  quotee  style  padding-top  56px  gt Because too much  light  doesn t  lt em gt illuminate lt  em gt  our paths and warm us  it only blinds and burns us  lt  h1 gt   lt  div gt   lt  body gt   lt script src  http   ajax googleapis com ajax libs jquery 1 jquery min js  gt  lt  script gt   lt script gt    var multiplexador   3    initial div height   document getElementById   wrap   scrollHeight    setInterval function         var div   document getElementById   wrap        var frase   document getElementById   quotee        var message    WIDTH div     div scrollWidth    px     frase scrollWidth  px  frase  n       message     HEIGHT div     initial div height    px     frase scrollHeight  px  frase  n                  if  frase scrollHeight  lt  initial div height - 30         multiplexador    1            quotee   css  font-size   multiplexador              console log message                  10    lt  script gt   lt  html gt

User · Answer

As much as I love the occasional upvotes I get for this answer  thanks    this is really not the greatest approach to this problem  Please check out some of the other wonderful answers here  especially the ones that have found solutions without looping     Still  for the sake of reference  here s my original answer    lt html gt   lt head gt   lt style type  text css  gt       dynamicDiv           background   CCCCCC      width  300px      height  100px      font-size  64px      overflow  hidden         lt  style gt    lt script type  text javascript  gt      function shrink                 var textSpan   document getElementById  dynamicSpan            var textDiv   document getElementById  dynamicDiv             textSpan style fontSize   64           while textSpan offsetHeight  gt  textDiv offsetHeight                        textSpan style fontSize   parseInt textSpan style fontSize  - 1                   lt  script gt    lt  head gt   lt body onload  shrink    gt       lt div id  dynamicDiv  gt  lt span id  dynamicSpan  gt DYNAMIC FONT lt  span gt  lt  div gt   lt  body gt   lt  html gt      And here s a version with classes    lt html gt   lt head gt   lt style type  text css  gt   dynamicDiv       background   CCCCCC      width  300px      height  100px      font-size  64px      overflow  hidden     lt  style gt    lt script type  text javascript  gt      function shrink                 var textDivs   document getElementsByClassName  dynamicDiv            var textDivsLength   textDivs length              Loop through all of the dynamic divs on the page         for var i 0  i lt textDivsLength  i                   var textDiv   textDivs i                   Loop through all of the dynamic spans within the div             var textSpan   textDiv getElementsByClassName  dynamicSpan   0                   Use the same looping logic as before             textSpan style fontSize   64               while textSpan offsetHeight  gt  textDiv offsetHeight                                textSpan style fontSize   parseInt textSpan style fontSize  - 1                                   lt  script gt    lt  head gt   lt body onload  shrink    gt       lt div class  dynamicDiv  gt  lt span class  dynamicSpan  gt DYNAMIC FONT lt  span gt  lt  div gt       lt div class  dynamicDiv  gt  lt span class  dynamicSpan  gt ANOTHER DYNAMIC FONT lt  span gt  lt  div gt       lt div class  dynamicDiv  gt  lt span class  dynamicSpan  gt AND YET ANOTHER DYNAMIC FONT lt  span gt  lt  div gt   lt  body gt   lt  html gt

User · Answer

Here is a version of the accepted answer which can also take a minFontSize parameter    function                    Resizes an inner element s font so that the inner element completely fills the outer element         author Russ Painter WebDesign GeekyMonkey com        author Blake Robertson         version 0 2 -- Modified it so a min font parameter can be specified                   param  Object  Options which are maxFontPixels  default 40   innerTag  default  span          return All outer elements processed        example  lt div class  mybigdiv filltext  gt  lt span gt My Text To Resize lt  span gt  lt  div gt               fn textfill   function options            var defaults                 maxFontPixels  40              minFontPixels  10              innerTag   span                     var Opts   jQuery extend defaults  options           return this each function                 var fontSize   Opts maxFontPixels              var ourText     Opts innerTag     visible first   this               var maxHeight     this  height                var maxWidth     this  width                var textHeight              var textWidth              do                   ourText css  font-size   fontSize                   textHeight   ourText height                    textWidth   ourText width                    fontSize   fontSize - 1                while   textHeight  gt  maxHeight    textWidth  gt  maxWidth   amp  amp  fontSize  gt  Opts minFontPixels                         jQuery

[jquery] Auto-size dynamic text to fill fixed size container

Examples related to jquery

Examples related to html

Examples related to css