javascript - 如何使表格中的字体大小自适应？

Question

我现在有一个表格，表格的字数不一样。现在假设表格大小不变，我希望表格中的字体大小随着字数的变化而变化。也就是说，越多字，字体越小，最后一个字，前面越大。你能告诉我如何实现这一目标吗？

标签： javascripthtmlcssweb

Answer 1

可能有更好的方法来做到这一点，但你可以使用 javascript。下面的例子：

var allTDs = document.querySelectorAll('td');

for (i=0; i<allTDs.length; i++){

    var tdLength = allTDs[i].innerText.length;

    if (tdLength<=100){
        allTDs[i].style.fontSize="large";
    } else if (tdLength>100 && tdLength<=200){
        allTDs[i].style.fontSize="medium";
    } else if (tdLength>200 && tdLength<=400){
        allTDs[i].style.fontSize="small";
    } else if (tdLength>400){
        allTDs[i].style.fontSize="x-small";
    };
};

注意：此示例计算 innerText 中的字符数而不是单词数。您可以将其更改为计算字数 - 粗略计算字数的一种方法是实际计算 innerText 中的空格“”：

var tdLength = allTDs[i].innerText.split(" ").length;