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


CSS text-overflow in a table cell?

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

我试过这个：

1
2
3
4
5
td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

相关讨论

要在文本溢出表单元格时用省略号剪切文本，需要在每个td类上设置max-widthcss属性，以便溢出工作。不需要额外的布局分区

1
2
3
4
5
6
td {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

对于响应式布局，使用max-widthcss属性指定列的有效最小宽度，或者仅使用max-width: 0;来实现无限的灵活性。另外，包含表需要一个特定的宽度，通常是width: 100%;，列的宽度通常设置为总宽度的百分比。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
table {
    width: 100%;
}
td {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
td.columnA {
    width: 30%;
}
td.columnB {
    width: 70%;
}

历史：对于IE 9(或更低版本)，您需要在HTML中包含它，以修复特定于IE的呈现问题。

1
2
3
4
5
6
7
8
<!--[if IE]>
<style>
    table {
        table-layout: fixed;
        width: 100px;
    }
</style>
<![endif]-->
相关讨论