表格单元格中的 CSS 文本溢出？

Question

我想在表格单元格中使用 CSS text-overflow，这样如果文本太长无法放在一行中，它将用省略号剪裁而不是换行。这可能吗？

我试过这个:

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

但是 white-space: nowrap 似乎使文本(及其单元格)不断向右扩展，将表格的总宽度推到其容器的宽度之外。但是，如果没有它，文本在到达单元格边缘时会继续换行。

Answer 1

要在文本溢出表格单元格时用省略号剪裁文本，您需要在每个 td 类上设置 max-width CSS 属性以使溢出起作用.不需要额外的布局 div 元素:

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

用于响应式布局；使用 max-width CSS 属性指定列的有效最小宽度，或者只使用 max-width: 0; 以获得无限的灵 active 。此外，包含表需要特定的宽度，通常是 width: 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 中包含此内容，以修复特定于 IE 的呈现问题

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