如何使用CSS截断表格中的长文本？

Question

任何人都可以给出一个CSS示例,说明如何创建一个表格,其中长文本被截断为以"..."结尾的文本？

这是一个例子:http://jsfiddle.net/NpABe/

<table>
    <tr>
        <td>aaaa</td>
        <td>ssssssss</td>
        <td>dddddddddddd</td>
    </tr>
    <tr>
        <td>ffffffffffffffff</td>
        <td>gggggggggggggggggggg</td>
        <td>hhhhhhhhhhhhhhhhhhhhhhhh</td>
    </tr>
    <tr>
        <td>jjjjjjjjjjjjjjjjjjjjjjjjjjjj</td>
        <td>kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</td>
        <td>llllllllllllllllllllllllllllllllllll</td>
    </tr>
</table>

Answer 1

使用text-overflow: ellipsis.您需要修复单元格的宽度并防止换行:

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

编辑:实际上这不起作用.您似乎需要一个容器div来将样式应用于:

<table>
  <tr>
    <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div</td>
(snip)

然后:

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

编辑2 啊有一种方法,但只有你使用table-layout: fixed:

table {
  table-layout: fixed;
  width: 100px;
}

td {
  white-space: nowrap;
  overflow: hidden;         /* <- this does seem to be required */
  text-overflow: ellipsis;
}

Answer 2

2021 年更新 - 纯 CSS 工作版本

接受的答案对我不起作用......

不指定 a 的唯一方法min-width是使用line-clamp.

.clamp {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 1;
  -webkit-line-clamp: 1;
}
.clamp-2 {
  line-clamp: 2!important;
  -webkit-line-clamp: 2!important;
}
.clamp-3 {
  line-clamp: 3!important;
  -webkit-line-clamp: 3!important;
}

由于 IE（终于）消亡，并被 Edge 取代，现在（几乎）全球支持率达到 96%。

IE 支持可以通过指定一个max-height基于line-height和来实现overflow-y: hidden。

例子

.clamp {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 1;
  -webkit-line-clamp: 1;
}
.clamp-2 {
  line-clamp: 2!important;
  -webkit-line-clamp: 2!important;
}
.clamp-3 {
  line-clamp: 3!important;
  -webkit-line-clamp: 3!important;
}

.clamp {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 1;
  -webkit-line-clamp: 1;
}
.clamp-2 {
  line-clamp: 2!important;
  -webkit-line-clamp: 2!important;
}
.clamp-3 {
  line-clamp: 3!important;
  -webkit-line-clamp: 3!important;
}

了解更多

• Caniuse @ https://caniuse.com/#search=line-clamp
• Codepen @ https://codepen.io/amarinediary/full/wvoKdzO