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