如何使用 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中文网其他相关文章！