為什麼「overflow:hidden」在表格單元格中不起作用以及如何修復它？

為什麼溢出在表格單元格中不起作用

在嘗試限製表格單元格的寬度時，溢出：隱藏屬性通常無法阻止表使用不含空格的文字字串擴展。這個問題可以透過在表格和表格單元元素上實現 CSS 屬性的組合來解決。

解決方案：

在邊緣截斷文字表格單元格，而不是讓單元格展開，應用以下屬性：

• 表格元素：

  • 表格佈局：固定

• 表格單元格元素：

  • 表格單元格元素：
  溢位：隱藏

空白： nowrap

範例：

範例：



範例：


，示範了這些屬性的正確用法：

 box-sizing: border-box;<br>}<br>table {<br> table-layout: 固定; b-order-order collapse: 折疊; <pre class="brush:php;toolbar:false"><tr>
  <td>
    This_is_a_terrible_example_of_thinking_outside_the_box.
  </td>
</tr>

寬度：200px;

}
td {
背景： #F00;
填充：20px;

溢出：隱藏;

空白：nowrap; 邊框：實心1px #000; 寬度：100%;

}

額外注意事項：請注意，應明確指定表格元素的寬度，以確保其等於或小於固定寬度單元格。

以上是為什麼「overflow:hidden」在表格單元格中不起作用以及如何修復它？的詳細內容。更多資訊請關注PHP中文網其他相關文章！