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

一尘不染

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

css

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

我尝试了这个：

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

但是，white-space:nowrap似乎使文本（及其单元格）不断向右扩展，从而使表格的总宽度超出了其容器的宽度。但是，如果没有它，文本在碰到单元格的边缘时会继续换行。

阅读 355

2020-05-16

共1个答案

一尘不染

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

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

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

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的呈现问题

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

2020-05-16