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

小编典典

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

all

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

我试过这个：

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

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

阅读 107

2022-03-07

共1个答案

小编典典

要在溢出表格单元格时使用省略号剪辑文本，您需要在每个类上设置max-widthCSS 属性以使溢出生效。td不需要额外的布局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.column_a {width: 30%;}
td.column_b {width: 70%;}

历史：对于 IE 9（或更低版本），您需要在 HTML 中包含此内容，以修复特定于 IE 的呈现问题

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

2022-03-07