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