如何使用 CSS 正確截斷表格單元格中的文字？

使用CSS Text-Overflow 截斷表格單元格中的文字

在網頁設計中，需要處理超出表格單元格寬度的文本經常出現。使用 CSS，您可以使用省略號截斷文字以防止換行，同時保持簡潔且有組織的表格佈局。

問題：儘管嘗試應用 CSS 溢位和文字溢位屬性，但其中的文字表格儲存格會持續換行或超出表格寬度。

解決方案：有效如果要使用省略號截斷文本，您還必須為每個表格單元格 (td) 類別設定 max-width 屬性。此約束允許文字以指定的寬度進行裁切。

以下是更新的 CSS 程式碼：

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

為了確保回應能力，請考慮使用 max-width: 0px;無限的寬度彈性。您也可以為包含的表格設定特定寬度（通常寬度：100%；）並將列寬定義為總寬度的百分比。

例如：

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

注意：對於Internet Explorer 9 或更低版本，您可能需要添加以下HTML 來修復渲染問題：

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

透過執行以下步驟，您可以使用省略號有效地截斷表格單元格中的文本，確保表格佈局乾淨且受控。

以上是如何使用 CSS 正確截斷表格單元格中的文字？的詳細內容。更多資訊請關注PHP中文網其他相關文章！