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

发布时间：2020-12-14 21:27:04 所属栏目：资源来源：网络整理

导读：任何人都可以给出一个CSS示例，我如何创建一个表，其中长文本被截断为以“…”结尾的文本？这是例子：http://jsfiddle.net/NpABe/ table tr tdaaaa/td tdssssssss/td tddddddddddddd/td /tr tr tdffffffffffffffff/td tdgggggggggggggggggggg/td tdhhhhhhhh

任何人都可以给出一个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>

解决方法

使用文本溢出：省略号。您将需要修复单元格的宽度并防止换行：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!