Question

我正在为我的网站使用HTML标签。

我有一个固定高度为<table>的HTML 150px。表格内容使用JavaScript填充动态我想为表格文字内容设置动态 font-size，如下所示。

我还有字符总数

HTML

<table style="height:150px;width:350px;">
   <tr>
      <td>
         bla....bla...bla...   /* I want to set this font size dynamic*/
      <td>
   </tr>
   <tr>
      <td>
         bla....bla...bla...   /* I want to set this font size dynamic*/
      <td>
   </tr>
</table>

但问题是，我不知道公式我应该申请。请帮帮我 - 我根据长度计算字符的总数，我应该申请设置font-size所以所有字符都应该放在没有over lapping的表中，而不是滚动。

由于

Answer 1

我推荐jQuery-plugin“FitText”。（http://fittextjs.com/）

$("table tr td").fitText();

它会根据宽度自动更改div中的字体大小。

jsFiddle：http://jsfiddle.net/vay0tf33/

Answer 2

您需要计算表格中字符的宽度。您可以使用将内容包装到跨度中并以像素为单位计算宽度的函数来执行此操作。然后将该函数的结果除以表的宽度。这应该可以获得行。将高度（以像素为单位）除以行数可以获得最大字体大小（以像素为单位）。

function calculateFontSize(width, height, content){
     var area = width*height;
     var contentLength = content.length();

     return  Math.sqrt(area/contentLength); //this provides the font-size in points.

}

重要说明：

此功能需要纯文本输入。正如@atmd所说，你只能估计字体大小。字体大小需要以点pt为单位。

小提琴：http://jsfiddle.net/b5yebL0k/

Answer 3

这是一个解决方案，它不是很好，但会让你想要你想要的

首先，您需要创建一个'visibility:hidden;display:inline;作为其样式的元素（css或inline，对于此示例无关紧要）。元素需要您要测量的文本。

<p id='hidden' style='visibility:hidden;display:inline;'>some thing here</p>

然后在你的脚本中：

var text = document.getElementById('hidden'); // id of hidden element

然后，如果您使用text.offsetWidth，您将获得元素的宽度然后，您可以在javascript中创建一个循环来增加字体大小，直到offSetWidth等于表格宽度。

上述不是一种很好的做事方式，但无论字体类型或重量如何，它都能准确地为您提供所需内容

如何计算字体大小？

3 个答案: