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

表格單元格中的 CSS 文字溢出

目標是在表格單元格中實現 CSS文字溢出，確保文字超出單元格的寬度用省略號剪裁，防止它包裝成多個

嘗試：

使用以下CSS 進行了初步嘗試：

td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

但是，white-space: nowrap屬性導致文字及其單元格無限向右擴展，超出表格

解決方案：

要達到所需的效果，必須為每個表格單元格設置max-width CSS 屬性。這是一個範例：

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

設定最大寬度可確保溢位包含在指定寬度內。

響應式佈局：

對於響應式佈局，可以考慮使用max-width 指定列的最小寬度或設定為max-width: 0;以獲得充分的靈活性。包含的表格應具有特定的寬度，例如width: 100%;.

table {width: 100%;}
td
{
 max-width: 0;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
td.column_a {width: 30%;}
td.column_b {width: 70%;}

IE 注意事項：

對於IE 9 或更早版本，以下HTML解決渲染問題需要hack：

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

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