缩放时使文本适合表格单元格，调整字体大小

【问题标题】：Make text fit in table cell when scaling, adapting font-size缩放时使文本适合表格单元格，调整字体大小
【发布时间】：2014-08-12 15:30:15
【问题描述】：

我有一个表格，它可以在屏幕宽度发生变化时调整其总宽度。不幸的是，这会导致文本溢出表格单元格，因为它太大了。我已经尝试过 vw 和 vh 单位，但这会使文本太小太快。它应该“正好适合”表格单元格。

您有什么想法吗？或者我有什么想法可以改变我的桌子以更好地工作？

【问题讨论】：

标签： text responsive-design font-size css-tables tablecell

【解决方案1】：

<div id="fit">
<div>some text</div>
</div>

固定大小

#fitin {
width: 300px;
height: 100px;
border: 1px solid black;
overflow: hidden;
font-size: 1em;
}

这个 JavaScript 可以完成这项工作。

$(function() {
while( $('#fitin div').height() > $('#fitin').height() ) {
    $('#fitin div').css('font-size', (parseInt($('#fitin div').css('font-size')) - 1) + "px" );
}
});

【讨论】：

【解决方案2】：

FitText 是一个简单的解决方案，如果它非常适合您的项目，这是一个工作示例 http://codepen.io/panchroma/pen/lDBvc

有时您必须使用压缩器设置来调整文本细节和可用空间的结果（例如 ....fitText(1.2)）

这有帮助！

【讨论】：