使用原生JavaScript设置表格单元格最大可行字号

针对你需要让Tambola游戏板单元格内文字使用最大可行字号的需求，这里提供两种主流浏览器原生支持、无需外部依赖的实现方案：

方案一：利用Canvas精确测量文本尺寸（推荐） #

这种方法通过Canvas API直接计算文本的宽高，快速算出适配单元格的最大字号，效率较高：

修改后的完整代码 #

HTML

<table id="tambola_board" style="border: 1px solid black"></table>

CSS

body {
  font-family: Arial, sans-serif;
}
.tambola-cell {
  border: 1px solid black;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box; /* 确保边框不占用额外内容空间 */
}

JavaScript

var tambola_board = {
  cell_size: 0,
  numbers_gone: [],
  numbers_gone_count: 0,
  numbers_left: 90
};

// 获取屏幕较小维度计算单元格尺寸
let x_width = window.screen.availHeight;
let y_height = window.screen.availWidth;
var small_dimension = x_width > y_height ? y_height : x_width;
tambola_board.cell_size = ~~(small_dimension / 12);

var table = document.getElementById("tambola_board");
// 创建Canvas用于测量文本
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

for (let row_num = 0; row_num < 9; row_num++) {
  row_value = 81 - 10 * row_num;
  var row = table.insertRow(0);
  for (let cell_num = 0; cell_num < 10; cell_num++) {
    var cell = row.insertCell(cell_num);
    cell.classList.add('tambola-cell');
    cell.style.width = `${tambola_board.cell_size}px`;
    cell.style.height = `${tambola_board.cell_size}px`;
    
    const cellValue = (row_value + cell_num).toString();
    cell.textContent = cellValue;
    
    // 计算最大字号
    const padding = 4; // 预留内边距，避免文字贴边
    const maxAvailableWidth = tambola_board.cell_size - padding * 2;
    const maxAvailableHeight = tambola_board.cell_size - padding * 2;
    
    let fontSize = 1;
    ctx.font = `${fontSize}px Arial`;
    let textWidth = ctx.measureText(cellValue).width;
    let textHeight = fontSize * 1.2; // 行高通常是字号的1.2倍，可根据字体调整
    
    // 逐步增大字号直到文本接近可用空间
    while (textWidth < maxAvailableWidth && textHeight < maxAvailableHeight) {
      fontSize++;
      ctx.font = `${fontSize}px Arial`;
      textWidth = ctx.measureText(cellValue).width;
      textHeight = fontSize * 1.2;
    }
    // 回退到最后一个合适的字号
    fontSize--;
    cell.style.fontSize = `${fontSize}px`;
  }
}

原理说明 #

1. 使用Canvas的measureText()方法精确获取文本宽度，结合字号估算文本高度（行高系数可根据字体微调）
2. 通过循环逐步增大字号，直到文本尺寸接近单元格的可用空间（减去预留内边距）
3. 最后回退到不溢出的最大字号，确保文字完全适配单元格

方案二：动态调整字号并检测溢出（纯DOM操作） #

如果不想使用Canvas，可以通过创建隐藏测试元素，直接检测文本尺寸是否溢出单元格：

修改后的JavaScript核心代码（替换原循环部分） #

for (let row_num = 0; row_num < 9; row_num++) {
  row_value = 81 - 10 * row_num;
  var row = table.insertRow(0);
  for (let cell_num = 0; cell_num < 10; cell_num++) {
    var cell = row.insertCell(cell_num);
    cell.classList.add('tambola-cell');
    cell.style.width = `${tambola_board.cell_size}px`;
    cell.style.height = `${tambola_board.cell_size}px`;
    
    const cellValue = (row_value + cell_num).toString();
    cell.textContent = cellValue;
    
    // 创建隐藏的测试元素，避免影响页面布局
    const testElement = document.createElement('span');
    testElement.textContent = cellValue;
    testElement.style.position = 'absolute';
    testElement.style.visibility = 'hidden';
    testElement.style.fontFamily = 'Arial';
    document.body.appendChild(testElement);
    
    const padding = 4;
    const maxWidth = tambola_board.cell_size - padding * 2;
    const maxHeight = tambola_board.cell_size - padding * 2;
    
    let fontSize = 1;
    testElement.style.fontSize = `${fontSize}px`;
    while (testElement.offsetWidth < maxWidth && testElement.offsetHeight < maxHeight) {
      fontSize++;
      testElement.style.fontSize = `${fontSize}px`;
    }
    fontSize--;
    cell.style.fontSize = `${fontSize}px`;
    
    document.body.removeChild(testElement);
  }
}

原理说明 #

1. 创建一个隐藏的测试<span>元素，避免修改真实单元格时触发不必要的页面重绘
2. 逐步增大测试元素的字号，通过offsetWidth和offsetHeight检测文本尺寸是否超过单元格可用空间
3. 将最终合适的字号应用到真实单元格

注意事项 #

• 两种方案都使用了box-sizing: border-box，确保单元格的边框不会占用内容空间，尺寸计算更准确
• 预留了padding值，避免文字紧贴单元格边框，提升视觉效果
• 若使用其他字体，需要同步修改Canvas或测试元素的fontFamily属性，保证测量准确

内容的提问来源于stack exchange，提问作者user1371666