Question

任何人都可以举例说明如何创建一个表格，其中长文本被截断为以“...”结尾的文本？

<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

这是对@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上的类也明确了它的目的是什么。

Answer 3

2020更新-完整的CSS工作版本

对我来说，建议的答案并没有解决问题...

经过研究，唯一没有指定最小宽度的方法是：

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

使用此方法，您无需添加其他div。

html结构应如下所示：

<tr>
  <td class="clamp">
    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.
  </td>
</tr>

这也是我可以使用的https://caniuse.com/#search=line-clamp，所有其他人都支持它（像往常一样，iE）...对于iE，您可以只指定max-height和overflow-y:hidden它应该可以解决问题。

这是一个简单的工作示例，https://jsfiddle.net/d8r4yckm/（仅用于“轻松自在”加载的引导程序）

Answer 4

如果只需要一行截断文本，请使用此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);
}

Answer 5

您可以为长文本制作截断类。见下面的类 [这适用于表 td]

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

为他人工作：

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

Answer 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>

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

6 个答案: