比如有如下table:
<table>
<tr>
<td class="howto">你好你好你好</td><td>你好</td><td>你好</td>
</tr>
<tr>
<td>你好</td><td>你好</td><td>你好</td>
</tr>
<tr>
<td>你好</td><td>你好</td><td>你好</td>
</tr>
<tr>
<td>你好</td><td>你好</td><td>你好</td>
</tr>
</table>
如果想让class="howto"的td只显示两个字符,多余的字以省略号代替,怎么做呢?
我们可以添加以下css(注意:td中包裹数据的div是必须的):
div.hidden{
overflow: hidden;
width: 4em;
white-space: nowrap;
text-overflow: ellipsis;
}
完整的演示见这里。