使用Javascript/jQuery調整固定高度/寬度表格單元格中的字體大小

Question

我想將可打印時間表作爲固定高度/寬度單元格的表格。 單元格包含名稱，我不希望名稱換行符。

有沒有辦法動態調整字體大小，以便不會有換行符或隱藏文字？

也許有人知道這個問題的好插件或片段？

Answer 1

嘗試white-space: nowrap和overflow: hidden包裹每個單元格中的內容與其他元素（表單元格不支持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)。