如何使用 CSS 正確截斷表格儲存格中的長文字？

如何在表格儲存格中使用CSS 文字溢位

您可能會遇到想要在表格儲存格中顯示文字的情況，但文字太長，無法輕鬆地放在一行中。您想用省略號（“...”）剪輯文本，而不是讓它換行到多行。

要實現此目的，您可以利用 CSS 屬性，例如「text-overflow」和'溢出'。但是，使用「white-space: nowrap」可能會導致一個特定問題：文字及其儲存格可能會不斷向右擴展，超出預期的表格寬度。

要解決此問題，您需要設定每個「td」類別的「max-width」CSS 屬性。設定「max-width」可確保溢位行為如預期運作：

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

在響應式佈局中，您可以使用「max-width」指定列的最小寬度。或者，您可以使用“max-width: 0”以獲得無限的靈活性。您還應該設定包含表格的寬度（例如寬度：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 9（或更低版本）的表格佈局問題可能需要額外的HTML 程式碼：

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

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