为什么'overflow:hidden”在表格单元格中不起作用以及如何修复它？

为什么溢出在表格单元格中不起作用

在尝试限制表格单元格的宽度时，溢出：隐藏属性通常无法阻止表使用不带空格的文本字符串扩展。这个问题可以通过在表格和表格单元格元素上实现 CSS 属性的组合来解决。

解决方案：

在边缘处截断文本表格单元格，而不是让单元格展开，应用以下属性：

• 表格元素：

  • 表格布局：固定

• 表格单元格元素：

  • 溢出：隐藏
  • 空白： nowrap

示例：

下面是一个更新的示例，演示了这些属性的正确用法：

 box-sizing: border-box;<br>}<br>table {<br> table-layout: 固定;<br> border-collapse: 折叠; <br> 宽度：200px;<br>}<br>td {<br> 背景： #F00;<br> 填充：20px;<br> 溢出：隐藏;<br> 空白：nowrap;<br> 边框：实心 1px #000;<br> 宽度：100%;<br>} <tbody><pre class="brush:php;toolbar:false"><tr>
  <td>
    This_is_a_terrible_example_of_thinking_outside_the_box.
  </td>
</tr>

额外注意事项：

请注意，应显式指定表格元素的宽度，以确保其等于或小于固定宽度单元格。