text-overflow ellipsis 自动截断超出范围的文本

今天前端同事问了一个小技巧的问题，怎么控制超出范围的文本自动截断，给她写完后来普渡下众生`(*∩_∩*)′

1、普通的文本段

对于普通的文本段的话只需要定义下面三个属性

p {
   white-space: nowrap; /* 使内容不自动换行 对应的还有 normal 自动换行 */
   overflow: hidden; /* 超出容器范围的内容隐藏 */
   text-overflow: ellipsis; /* 文本超出容器范围以 ... 做截断 */
}

<p>hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world </p>

    

2、表格的文本段

   当在表格中想要实现此效果时需要将此表格的 table-layout 设为 fixed

table {
    width: 100%;
    table-layout: fixed; /* 一定要有此属性 */
}
td {
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

    其他与普通文本段的定义没区别

    

来源：oschina

链接：https://my.oschina.net/u/252076/blog/626318