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