jQuery CSS font-size

Question

如果内容进入第二行，如何自动调整<td>的字体大小？我知道如何使用CSS和jquery增加/减少字体大小，但如果具有特定类名文本的特定或所有td的长度超过一行，如何自动使字体大小变小。

<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

你想要.filter()。对于大多数元素，这应该有效：

$(".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");

处理表格时，一行中的所有单元格都具有相同的高度，因此请检查子元素的值。例如，将所有内容包装在div中。但是，如果您必须直接对<td>采取行动：

$(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

没有一种简单的方法来获取文本内容的宽度（以像素为单位）。但是，您可以通过将字符数乘以每个字符的平均像素宽度来获得合理的估计值 - 这将根据字体而变化，并且最适合像Courier这样的固定宽度字体。这也假设所有内容都是简单的文本而没有额外的格式。

大多数字体的字符宽度小于高度，因此假设width = height肯定会有效。

示例：

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

编辑：根据其他答案，您也可以将此技术应用于高度。只需确保宽度/高度比较反映当前字体大小而不是任何硬编码值。

Answer 3

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

玩高度＆gt; 20和newFontsize得到你想要的。