文本超出为省略号在很多位置都会用到，作为一个基本样式或者说原子类样式，我们需要知道其实现原理为什么。

使用场景

文字内容过多，超出盒子模型的内容显示为省略号。提示：无论是单行还是多行文本，都需要设置高度，行高，超出不可见。（仅供参考）

文本单行省略

.demo{white-space:nowrap;（超出不换行，默认为换行的）text-overflow:ellipsis;（省略号样式）//代码部分 完整部分overflow: hidden;white-space:nowrap;text-overflow:ellipsis;} 复制代码

文本多行省略 (-webkit-)

white-space:normal;（超出宽度换行）text-overflow: ellipsis; （省略号样式）-webkit-box-orient: vertical;-webkit-line-clamp: 3;（行数）display: -webkit-box;（展示盒子模型类型）//代码部分(供拷贝)overflow:hidden;white-space:normal;text-overflow: ellipsis; -webkit-box-orient: vertical;-webkit-line-clamp: 3;display: -webkit-box;复制代码

其他方案

• 引入jq插件，待补充