单行文本：
.box{ width: 200px; background-color: aqua; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
多行文本
1.利用-webkit-line-clamp属性
.box{ width: 200px; overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; border:solid 1px black; } 缺点：仅适用于webkit内核或移动端页面。在火狐，ie等浏览器并不支持。
2.用伪元素模拟实现
设定固定宽高，多余部分隐藏，在结尾用包含省略号(…)的元素覆盖部分内容。
这里用一个包含了省略号，且背景色为白色的伪元素遮盖了部分内容。高度height 是行高 line-height 的三倍。需要显示几行文字就设置为几倍。
.box{ position:relative; line-height:1.4em; height:4.2em; overflow:hidden; } .box::after { content:"..."; font-weight:bold; position:absolute; bottom:0; right:0; padding:0 -20px 1px 45px; background-color:white; }
