如何使用 CSS 剪切表格單元格中帶有省略號的文字？

使用CSS 剪切表格單元格中帶省略號的文本

問題：

你可以剪下嗎表格儲存格中的文字帶有省略號，而不是允許其換行為多個行？

嘗試的解決方案：

使用CSS屬性overflow:hidden、text-overflow:ellipsis和white-space:nowrap沒有按預期工作。

答案：

致成功剪輯表格單元格中溢出的文本，您需要將max-width 屬性添加到td 類別：

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

這設定每個表格單元格的最大寬度並套用其他屬性以確保它當文字超過指定寬度時，會用省略號進行剪輯。

在響應式佈局中，您可以使用動態最大值寬度：

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

此外，包含的表格需要特定的寬度：

table {
  width: 100%;
}

表格單元格寬度可以設定為百分比：

td.column_a {
  width: 30%;
}
td.column_b {
  width: 70%;
}

對於舊版的Internet Explorer（IE 9或更低版本），需要使用此附加程式碼來修復渲染問題：

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

以上是如何使用 CSS 剪切表格單元格中帶有省略號的文字？的詳細內容。更多資訊請關注PHP中文網其他相關文章！