HTML - 如何避免单元格表中的文本在单元格非常短时溢出？

Question

我的HTML页面中有类似的内容：

<table>
  <tbody>
    <tr style="height: 20vh; line-height: 16px;">
      <td width="1%" >Not important text in cell 1</td>
      <td width="42%">Important text in cell 2</td>
      <td width="18%">Not important text in cell 3</td>
      <td width="39%">Very important text in cell 4</td>
    </tr>
  </tbody>
</table>

但大多数时候，窗口页面可以显示为小屏幕。因此，当单元格太短时（由于大小屏幕或因为单元格的宽度可能在0到5％之间变化），宽度无效，尽管添加了{{1}，但单元格中的文本仍然完全显示}。目前，文本始终显示，单元格将宽度调整为文本宽度。像这样：Bad example

  

如何截断每个单元格的文本？

注意1：文字必须包含在一行中，不得包装。

注意2：客户端浏览器无法执行javascript代码且未连接到互联网。这就是为什么代码是在完整的HTML / CSS中生成的。

注意3：在某些情况下，宽度可能等于0％或0px。在这种情况下，文本不得出现。

所以这就是我期望的第一个单元的宽度为1％的值：

• 小屏幕：Good example 1 VS Bad example
  
• 中画面：Good example 2 VS Bad example
  

我试过了：

max-width: 1%;

还有那些CSS样式：

<td width="1%" style="max-width: 1%;">Text in cell 1</td>

但我从未成功过。我做错了吗？有人有这个想法吗？