省略号

单行溢出

white-space: nowrap; //不换行
overflow: hidden; //超出的隐藏
text-overflow: ellipsis; //显示省略符号来代表被修剪的文本。

多行溢出

备注：此方法兼容性不佳，safari 和 chrome 支持比较好，在 移动端 比较好用

overflow: hidden; // 超出的文本隐藏
text-overflow: ellipsis; // 溢出用省略号显示
display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
-webkit-line-clamp: 2; // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
/* autoprefixer: ignore next */
-webkit-box-orient: vertical; // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）

计算折行

浅谈移动端过长文本溢出显示省略号的实现方案

兼容 IE

多行文本溢出显示省略号 【兼容 IE】

参考

• CSS 多行文本溢出省略显示
• 可能是最全的 “文本溢出截断省略” 方案合集
• 小技巧！CSS 整块文本溢出省略特性探究
• CSS 单行、多行文本溢出显示省略号

FQ

• 移动端 p 文本指定行数，超出省略号的溢出问题?

解决方法：移动端 p 文本指定行数，超出省略号的溢出问题