如何根據單元格內容更改表格單元格中的字體大小？

我有一個HTML表格，它的單元格從0開始遞增（從左到右，直到底部）。如何根據單元格內容更改表格單元格中的字體大小？

我在CSS中固定了width和height（在我的情況下，寬度爲40px，高度爲25px）。

當表格變大時，裏面的數字也變大（例如，最後一個數字是1266356）。這會導致單元格比我在CSS中定義的更寬，從而相應地擴展整個表格。

取而代之，我希望數字的字體更小以保持單元格40px的寬度。

我該如何使用CSS/Javascript/jQuery來實現這個功能？

2010-04-22 Misha Moroshko

有可能是一個聰明的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"); 
}

來源

2010-04-22 13:39:35 karim79

感謝您的想法，但它的主要問題是，我必須自己計算每個文本長度的字體大小。我正在尋找一個自動化解決方案... – 2010-04-22 14:59:18

我認爲這是要走的路，因爲沒有現成的機制來解決您的問題。但是，您可以擴展此解決方案。您可以使用默認大小作爲起點，而不是設置預設大小，從而減小字體大小，直到單元格的寬度小於設置的閾值（您的情況爲40px）。 – 2010-04-22 16:55:14

你可以遍歷表中的行和單元格，檢查的長度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"; 
     } 
    } 
}

來源

2010-04-22 16:42:49 Sorig

這是我在做我的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]; 
    }

，應該讓你一些方式

來源

2010-04-22 16:51:42 mkoryak

愛你的域名;-) – 2010-04-22 16:56:52

它是我做的..有時=） – mkoryak 2010-04-22 21:41:39

我寫了一個函數來幫助你根據容器調整字體。

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

如果你願意，你可以通過你的表圈和傳遞每個元素。

來源

2018-02-18 19:08:16

如何根據單元格內容更改表格單元格中的字體大小？

回答

相關問題