首頁 > web前端 > css教學 > 為什麼「overflow:hidden」在表格單元格中不起作用以及如何修復它?

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

Linda Hamilton
發布: 2024-12-07 14:54:16
原創
244 人瀏覽過

Why Doesn't `overflow: hidden` Work in a Table Cell and How Can I Fix It?

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

在嘗試限製表格單元格的寬度時,溢出:隱藏屬性通常無法阻止表使用不含空格的文字字串擴展。這個問題可以透過在表格和表格單元元素上實現 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板