javascript - 在 Javascript/jQuery 中调整固定高度/宽度表格单元格的字体大小

Question

我想制作一个可打印的时间表作为具有固定高度/宽度单元格的表格。单元格包含名称，我不希望名称出现换行符。

有没有办法动态调整字体大小，这样就不会出现换行或隐藏文本？

也许有人知道解决该问题的好插件或代码片段？

Answer 1

尝试使用 white-space: nowrap 和 overflow: 用另一个元素包装每个单元格的内容(表格单元格不支持 overflow :hidden)隐藏并减小该元素的字体大小，直到其内容适合它。

示例代码:

HTML:

<table>
  <tbody>
    <tr>
      <td><span>cell</span></td>
      <td><span>another cell</span></td>
      <td><span>yet another cell</span></td>
    </tr>
  </tbody>
</table>

CSS:

td span {
  display: block;
  white-space: nowrap;
  width: 100px;
  overflow: hidden;
  font-size: 100%;
}

JS:

$(function() {
  $('td span').each(function() {
    var fontSize = 100;
    while (this.scrollWidth > $(this).width() && fontSize > 0) {
      // adjust the font-size 5% at a time
      fontSize -= 5;
      $(this).css('font-size', fontSize + '%');
    }
  });
});

Working version of the example (JSBin) .