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

I have an HTML table which has incrementing numbers starting from 0 in its cells (left to right, up to bottom).

我有一个HTML表，它的单元格中从0开始增加数字(从左到右，从下到下)。

I fixed in CSS the width and the height of the cells (40px width, 25px height, in my case).

我在CSS中确定了单元格的宽度和高度(40px宽度，25px高度，在我的例子中)。

When the table becomes larger, the numbers inside it becomes large also (for example, the last number is 1266356). This causes the cells to be wider than I defined in the CSS, which expands the whole table accordingly.

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

Instead, I would like the font of the numbers to be smaller to keep the width of the cell 40px.

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

How can I accomplish this using CSS / Javascript / jQuery ?

如何使用CSS / Javascript / jQuery实现这一点?

4 个解决方案

#1

There's probably a clever CSS way to do this, but in jQuery something like the following could do the trick:

也许有一种很聪明的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");
}

#2

You could loop through the rows and cells in the table and check the length of the innerHTML. It might look something like this:

您可以遍历表中的行和单元格，并检查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

here is what i do in my dropdownReplacement plugin:

下面是我在dropdownreplace插件中所做的事情:

using detectCharWidth function i figure out the avg char width of the text in an div, then i can multiply this by the length of the text to see if it will fit in an input.

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

at this point you could change the font to me smaller

现在你可以把字体改小一点

here is the function:

这是功能:

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];
  }

that should get you some of the way

这应该能让你有所收获

#4

I wrote one function to help you adjust a font depending on the container.

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

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);
        }
    }

Change the height to your needs I fixed it o 36.

把高度换成你的需要，我把它修好了。

And you have to pass your td element :

你必须传递你的td元素:

adjustFont($(yourTdElementHere));

If you want, you can loop through your table and pass on each element.

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

#1