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

【问题标题】：How can I truncate long texts in a table using CSS?如何使用 CSS 截断表格中的长文本？
【发布时间】：2012-02-07 18:18:52
【问题描述】：

谁能给出一个 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>

【问题讨论】：

这能回答你的问题吗？ How can I truncate table cells, but fit as much as content possible?

标签： html css

【解决方案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;
 }

EDIT 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;
}

【讨论】：

overflow 在这里不起作用，因为td 元素默认为display: table-cell。
@Rory，是的，你说的很对。事实上，它根本不起作用。本可以发誓我以前做过，但如果没有额外的 div 似乎是不可能的:(

【解决方案2】：

这是@RobAgar 答案的变体，对我来说效果很好。我定义了以下 CSS：

td.item-node {
   max-width: 10em;
}
div.ellipsis {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

HTML 看起来像

<td class="item-note">
   <div class="ellipsis">Really super duper long item note that will truncate</div>
</td>

这样我可以指定我关心的东西（表格单元格）的宽度，而不必为每个单元格重复所有空白、溢出的 CSS 属性。 div 上的类也说明了它的用途是什么。

【讨论】：

【解决方案3】：

如果您只需要截断一行文本，请使用此 css：

.truncate-text-one-line{
    width:80%;
    height: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

否则，使用此脚本：

function shorten_text(text, maxLength) {
    var ret = text;
    if (ret.length > maxLength) {
        ret = ret.substr(0,maxLength-3) + "...";
    }
    document.write(ret);
}

【讨论】：

【解决方案4】：

2021 年更新 - 纯 CSS 工作版

接受的答案对我没有用...

不指定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%。

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

示例

.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;
}

<table>
  <thead>
    <tr>
      <th scope="col">Title</th>
      <th scope="col">Context</th>
      <th scope="col">Date</th>
    </tr>
  </thead>
  <tbody>

  <tr>
    <th scope="row">French Revolution</th>
    <td class="clamp clamp-3"><span style="color:red;">Clamp 3 lines</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </td>
    <td>1789</td>
  </tr>

  <tr>
    <th scope="row">First Republic</th>
    <td class="clamp clamp-2"><span style="color:red;">Clamp 2 lines</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td>
    <td class="text-center text-decoration-line-through">1792</td>
  </tr>

  <tr>
    <th scope="row">Star Wars: A New Hope</th>
    <td class="clamp clamp-1"><span style="color:red;">Clamp 1 lines</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td>
    <td>1977</td>
  </tr>

  </tbody>
</table>

了解详情

Caniuse@https://caniuse.com/#search=line-clamp
密码笔@https://codepen.io/amarinediary/full/wvoKdzO

【讨论】：

Edge 支持这个吗？
自 2021 年起，所有浏览器都支持它。（因为 IE 被 Edge 取代）。请参阅caniuse。

【解决方案5】：

您可以为长文本创建截断类。见下课 [这适用于表 td]

 .truncate {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      max-width: 1px;
    }

为他人工作：

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

【讨论】：

【解决方案6】：

css 文本溢出：省略号；

td {
    display: inline-block;
    width: 150px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    }

<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>lllllllllllllllllllllllddddddddddddddddddddddddddddddddddddlllllllllllll</td>
    </tr>
</table>

【讨论】：