javascript - jQuery CSS 字体大小

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