超过指定宽度变为...

今天要实现的功能是：在表格中，如果表格内容超过两行则多余部分以…表示。
一、首先说下一行显示不下出现… 怎么实现：

.hideInfo{
    word-break: keep-all; /* 不换行 */
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow: ellipsis ; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}

<td class="hideInfo">内容</td>

当然td一定要设置宽度，不管是百分比还是固定宽度。
此时td就变成一行有省略号了
二、两行及多行如何显示省略号

.hideInfo{
    overflow:hidden;/*与一行相同*/
    text-overflow: ellipsis;/*与一行相同*/
    display: -webkit-box;/*一种展示类别*/
    -webkit-line-clamp: 2;/*表示到第几行显示不下有省略号*/
    -webkit-box-orient: vertical;
    white-space: normal;/*一行设置成不换行，二两行正常*/
    word-break:break-all;/*一行设置成不换行，二两行正常*/
}

同理

<td class="hideInfo"></td>

但是此时发现问题:
由于设置了display:-webkit-box;,如果几个td连续用了hideInfo这个类，那么后面的td就会排列到前面的td的下面。
如果要解决这个问题，就需要去深入了解-webkit-box这个属性。
-webkit-box是css3的属性，目前只得到了几个浏览器的支持。
其实我只是用了个小技巧，破坏了后面td在前面td下面这种情况。

<td><span class="hideInfo">内容</span></td>

这样的话一切就显示正常啦。
��

---

由于这是本人第一篇真正的原创技术博客，接下来会逐步完善，希望大家见谅。。。