如何使用CSS截断表中的长文本？ [英] How can I truncate long texts in a table using CSS?

问题描述

任何人都可以给我一个CSS示例，如何创建一个表，其中长文本被截断为以...结尾的文本？

Can anyone give a CSS example of how can I create a table where long texts are truncated to texts ending with "..."?

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

推荐答案

省略号。您将需要修正单元格的宽度，并防止换行：

Use text-overflow: ellipsis. You will need to fix the width of the cells and prevent line wrapping:

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

EDIT ：实际上这不会工作。你似乎需要一个容器div来应用这些样式：

EDIT: actually this won't work. It seems you need a container div to apply the styles to:

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

这篇关于如何使用CSS截断表中的长文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！