jQuery CSS font-size

Question

How do I auto resize the font-size of a <td> if the content goes into second line? I know how to increase/decrease font size using CSS and jquery but how to automatically make the font-size smaller if a particular or all the td's with a specific class name text gets longer then one line.

<div style="overflow: hidden;" id="parentDiv" class="scroll">

 <div id="4" >
  <table id="t4" class="Table">
    <tbody>
      <tr>
        <td id="b4" class="bY"><table id="inner1" width="100%" cellpadding="3">
            <tbody>
              <tr>
                <td class="code" id="code4" width="172"></td>
                <td class="Num" id="Num4" width="50"></td>
                <td colspan="2" class="Name" id="Name"></td>
              </tr>
              <tr>
                <td class="code" width="172">&nbsp;</td>
                <td>&nbsp;</td>
                <td class="serial" width="110"></td>
                <td class="serial" width="322"></td>
              </tr>
            </tbody>
          </table></td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

You want .filter() . For most elements this should work:

$(".myClass").filter(function()
{
    var el = $(this);
    el.css("white-space", "nowrap");
    var lineHeight = el.height();
    el.css("white-space", "");
    return el.height() > lineHeight;
}).css("font-size", "10pt");

Dealing with tables, all the cells in a row have the same height, so check the value of a child element. Eg, wrap everything in a div. However, if you must act on a <td> directly:

$(function()
{
    $(".myClass td").filter(function()
    {
        var el = $(this);
        el.closest("tr").andSelf().css("white-space", "nowrap");
        var lineHeight = el.height();
        el.css("white-space", "normal");
        var textWraps = el.height() > lineHeight;
        el.closest("tr").andSelf().css("white-space", "");
        return textWraps;
    }).css("font-size", "10pt");
});

Answer 2

There isn't a straightforward way to get the width (in pixels) of text content. You can however get a reasonable estimate by multiplying the number of characters by the average pixel width of each character - this will vary depending on the font, and works best for fixed-width fonts like Courier. This also assumes that all the content is simple text without additional formatting.

Most fonts have a character width less than the height, so assuming width = height will definitely work.

Example:

var fontSize = parseInt($('.my-td-class').css('font-size')); // get default font size

function updateFont() {
  var e = $('#some-element');
  while (e.text().length * fontSize > e.width()) {
    fontSize *= 0.8;  // reduce to 80%
    e.css('font-size', fontSize + 'px');
  }
}

Edit: Based on the other answers, you could apply this technique to the height as well. Just make sure that the width/height comparison reflects the current font size and not any hard-coded value.

Answer 3

var newFontSize = 8
if $('td').filter(function() {
    return $(this).height() >  20 
}).css("font-size", newFontSize);

Play with the height > 20 and newFontsize to get what you want.