為什麼「overflow:hidden」在我的表格單元格 () 中不起作用？

溢位在 中不起作用：CSS 修復

溢位：隱藏在

中可能無法如預期般運作;元素，導致不受約束的文字溢出超出單元格的預期寬度。要解決這個問題，我們必須深入研究涉及的 CSS 屬性。

問題的癥結在於表格元素的預設行為。表格通常使用流體佈局，其中單元格寬度根據內容擴展和收縮。要覆蓋此設置，我們必須指定固定表格佈局：

table {
  table-layout: fixed;
}

登入後複製

此外，在表格容器上設置固定寬度會限製表格單元格可用的整體大小：

table {
  ...
  width: 200px;  

登入後複製

最後，為了真正限制儲存格的內容，我們對錶格儲存格套用overflow:hidden，並套用white-space: nowrap來防止單字換行：

td {
  ...
  overflow: hidden;
  white-space: nowrap;
}

登入後複製

這些組合調整可確保文字內容在儲存格邊緣被截斷，防止其溢出。

範例

考慮這個修改後的範例：

<table>

現在，文字將根據需要以 100px 單元格寬度被截斷。

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