如何根据单元格内容更改表格单元格中的字体大小？答案

【问题标题】：How to change the font size in table cells according to cells content?如何根据单元格内容更改表格单元格中的字体大小？
【发布时间】：2018-02-19 04:09:01
【问题描述】：

我有一个 HTML 表格，其单元格中的数字从 0 开始递增（从左到右，从上到下）。

我在 CSS 中修复了单元格的 width 和 height（在我的情况下为 40px 宽，25px 高）。

当表格变大时，其中的数字也会变大（例如，最后一个数字是 1266356）。这会导致单元格比我在 CSS 中定义的要宽，从而相应地扩展整个表格。

相反，我希望数字的字体更小以保持单元格的宽度为 40 像素。

如何使用 CSS / Javascript / jQuery 完成此操作？

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

可能有一个聪明的 CSS 方法可以做到这一点，但在 jQuery 中，类似以下的东西可以做到这一点：

// if the length exceeds a predefined limit
if($('.someCell').text().length > 5) {

    // change the font size of it's text
    $('.someCell').css("font-size", "8px");
}

【讨论】：

感谢您的想法，但主要问题是我必须自己计算每个文本长度的字体大小。我正在寻找一个自动化的解决方案...
我认为这是要走的路，因为没有现有的机制可以解决您的问题。但是，您可以扩展此解决方案。您可以使用默认大小作为起点，而不是设置预设大小，减小字体大小直到单元格的宽度小于设置的阈值（在您的情况下为 40px）。

【解决方案2】：

您可以遍历表格中的行和单元格并检查 innerHTML 的长度。它可能看起来像这样：

var tableRows = document.getElementById("myTable").rows;
maxLength = 5;

for(var i = 0; i<rows.length;i++)
{
    var rowCells = tableRows[i].cells.length;
    for(var a = 0; a<rows.length;a++)
    {
        if(rowCells[a].innerHTML.length > maxLength)
        {
            rowCells[a].style.fontSize = "8px";
        }
    }
}

【讨论】：

【解决方案3】：

这是我在dropdownReplacement plugin 中所做的：

使用 detectCharWidth 函数我计算出 div 中文本的平均字符宽度，然后我可以将它乘以文本的长度，看看它是否适合输入。

此时你可以把字体改小一点

函数如下：

var detectedCharWidths = {};
var detectCharWidth = function(testText){
     var val = testText || "a b c d e f 1 2 3 4 5 6 A B C D E F ! ! %"; //correct detection depends on this more then anything
    if(!detectedCharWidths[val]){
    var $inp = $("<span>", {
     "text":val,
    // "class":opts.selectClass,
     "css": {"background":"none", "margin":0, "padding":0, "overflow":"visible", "width":"auto", "color":"#FFF"}
    });
    $body.append($inp);
    detectedCharWidths[val] = ($inp.width() / val.length);
    $inp.remove();
    }
    return detectedCharWidths[val];
  }

这应该会让你有所收获

【讨论】：

【解决方案4】：

我写了一个函数来帮助你根据容器调整字体。

function adjustFont(x) {
        if (x.height() <= 36)
            return x.css("font-size");
        else {
            var sizeInPx = x.css("font-size").split("px")[0];
            x.css("font-size", (sizeInPx - 1) + "px");
            adjustFont(x);
        }
    }

根据您的需要更改高度，我将其固定为 36。

你必须传递你的 td 元素：

adjustFont($(yourTdElementHere));

如果需要，您可以循环遍历表格并传递每个元素。

【讨论】：