在固定大小的表格行中缩小字体大小

Question

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

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

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

在评论中的对话之后，我了解到这种方法应该是 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>

output 在这里：

Answer 1

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

 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 ）。 带overflow: hidden的外层div显示单元格的实际大小，内层div显示内容的实际大小。
我们减小font-size ，从而减小内容的大小，直到内部div小于外部 div。
最后，我们删除了这些不必要的div 。

CSS 添加了两项更改：

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

Answer 2

您可以通过 Javascript 调整文本大小，直到高度与您的首选高度匹配。

在固定大小的表格行中缩小字体大小

问题描述

2 个解决方案

解决方案1
1 2022-01-11 14:15:45

解决方案2
0 2022-01-11 12:12:22

在固定大小的表格行中缩小字体大小

问题描述

2 个解决方案

解决方案1 1 2022-01-11 14:15:45

解决方案2 0 2022-01-11 12:12:22

解决方案1
1 2022-01-11 14:15:45

解决方案2
0 2022-01-11 12:12:22