Question

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

有没有办法动态调整字体大小，以便没有换行符或隐藏文字？

也许有人知道这个问题的好插件或片段？

Answer 1

尝试使用overflow :hidden和white-space: nowrap将另一个元素（表格单元格不支持overflow: hidden）包装在每个单元格的内容中，并减少该元素的font-size直到它的内容适合它。

示例代码：

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)

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

1 个答案: