在固定大小 table 行中缩小字体大小

Question

我有一个 table 尺寸为 width: 8cm 和 height: 15.4cm 的网页。 table 由七行组成，每行具有相同的高度。有些行会填充短文本，有些行会填充较长的文本，持续 2-3 句话。

因为我事先不知道文本的长度，所以我想让浏览器选择合适的字体大小以很好地适应 table 单元格中的文本。

我的网页最终目标是打印在物理纸上，因此不会在各种设备上查看，因此响应式方法不是这里的问题。

经过评论中的对话，我明白了这个方法应该是 javascript 而不是 css。谁能解释一下该怎么做？

这是我的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset=UTF-8">
    <style>
        body {
            width:10cm;
            height: 16.8cm;
            border: 1px solid;
            margin: auto;}
        table {border-collapse: collapse; width: 100%;} /* table with size of body */
        tr {border: 1px solid;
        height: calc(16.8cm/7); /* Distribute rows height */
            }
      </style>
  </head>
<body>
<table>
<tbody>
  <tr>
    <td>Some short text. Choose default font size for this row.</td>
  </tr>
  <tr>
    <td>Some longer text that I want its font-size to be smaller. How to do that? Blah blah blah asdf qwer zxcv. Some additional dummy text: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </td>
  </tr>
  <tr>
    <td>Lorem ipsum dolor sit amet. </td>
  </tr>
  <tr>
    <td>Text number 4</td>
  </tr>
  <tr>
    <td>Text number 5</td>
  </tr>
  <tr>
    <td>Text number 6</td>
  </tr>
  <tr>
    <td>Text number 7</td>
  </tr>
</tbody>
</table>
</body>
</html>

输出在这里：

Answer 1

您可以通过 Javascript 调整文字大小，直到高度符合您的首选高度。

Answer 2

如果我对您的理解正确，那么此解决方案可能会对您有所帮助。这不是最漂亮和最佳的解决方案 - 但它似乎有效：

function normalize({
  table,
  maxFontSize = 40,
  stepFontSize = 0.5
}) {
  table.style.visibility = "hidden"; // hiding unpleasant visual effects
  const cells = table.querySelectorAll('td');
  cells.forEach((el) => {
    el.innerHTML = `<div class="container"><div class="wrapper">${el.innerHTML}</div></div>`;
    const container = el.querySelector('.container');
    const wrapper = el.querySelector('.wrapper');
    for (let i = maxFontSize; i > 0 && container.offsetHeight <= wrapper.offsetHeight; i -= stepFontSize) {
      el.style.fontSize = `${i}px`;
    }
    el.innerHTML = wrapper.innerHTML;
  });
  table.style.removeProperty('visibility');
}

normalize({
  table: document.querySelector('table')
});

body {
  width: 10cm;
  height: 16.8cm;
  border: 1px solid;
  margin: auto;
}

table {
  border-collapse: collapse;
  width: 100%;
}


/* table with size of body */

tr td {
  border: 1px solid;
  height: calc(16.8cm / 7);
  box-sizing: border-box;
  /* Distribute rows height */
}

.container {
  overflow: hidden;
  height: 100%;
}

<table>
  <tbody>
    <tr>
      <td>Some short text. Choose default font size for this row.</td>
    </tr>
    <tr>
      <td>Some longer text that I want its font-size to be smaller. How to do that? Blah blah blah asdf qwer zxcv. Some additional dummy text: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </td>
    </tr>
    <tr>
      <td>Some longer text that I want its font-size to be smaller. How to do that? Blah blah blah asdf qwer zxcv. Some additional dummy text: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Some
        longer text that I want its font-size to be smaller. How to do that? Blah blah blah asdf qwer zxcv. Some additional dummy text: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </td>
    </tr>
    <tr>
      <td>Text number 4</td>
    </tr>
    <tr>
      <td>Text number 5</td>
    </tr>
    <tr>
      <td>Text number 6</td>
    </tr>
    <tr>
      <td>Text number 7</td>
    </tr>
  </tbody>
</table>

工作原理：

在 JS 的帮助下，我们将每个单元格的内容包裹在两个 div（外部 - .container 和内部 - .wrapper）中。外层div和overflow: hidden表示单元格的实际大小，内层div表示内容的实际大小。
我们减少 font-size 从而减少内容的大小，直到内部 div 小于外部。
最后，我们删除了这些 div 不需要的。

已对 CSS 添加了两个更改：

为上述 JS 脚本添加 .container class 样式。
box-sizing: border-box；已经添加到table单元格中，因为当你使用这样的height: calc(16.8cm / 7)构造时，你还需要考虑填充值和边框粗细。

在固定大小 table 行中缩小字体大小

Make font-size smaller in a fixed-size table row

javascript

html-table

font-size