如何在表格儲存格中使用省略號實現CSS文字溢出？

表格儲存格中的 CSS 文字溢位

在表格儲存格中實作文字溢位可能具有挑戰性。當使用 text-overflow: ellipsis 時，單獨使用省略號可能還不夠，我們可以使用額外的 CSS 屬性來達到所需的效果。

解決方案

用省略號和為了防止換行，我們為每個表格單元格（td 元素）設定 max-width 屬性。這指定了文字在被剪切之前可用的最大寬度。此外，overflow: hide 可確保隱藏多餘的文字。

CSS 代碼

td {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

響應式佈局

For在響應式佈局中，max-width 屬性可用於定義列的有效最小寬度。或者，設定 max-width: 0;允許無限的靈活性。包含的表格應具有特定的寬度，通常設定為 width: 100%;。

歷史註釋

對於Internet Explorer 9 及更早版本，附加

<!--[if IE]>
<style>
  table {
    table-layout: fixed;
    width: 100px;
  }
</style>
<![endif]-->

歷史註釋對於Internet Explorer 9 及更早版本，附加標籤必須包含在HTML中才能解決渲染問題：

以上是如何在表格儲存格中使用省略號實現CSS文字溢出？的詳細內容。更多資訊請關注PHP中文網其他相關文章！