CSS —— 单行和多行文本实现省略号

一、单行文本

单行文本需要添加固定宽度以兼容部分浏览器，像小程序、微信浏览器等，建议添加。

width: 200px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

二、多行文本

display: -webkit-box：将对象作为弹性伸缩盒子模型显示 ，实现多行文本的前提条件；
-webkit-line-clamp：该属性 可以把 块容器 中的内容限制为指定的行数，必填；
-webkit-box-orient：设置或检索伸缩盒对象的子元素的排列方式 ，可选。

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

备注：多行文本省略号的实现，不同的浏览器有不同的CSS属性名称。例如上面的-webkit-，只适配于移动端页面和基于Webkit内核实现的浏览器，目前除了IE浏览器其他主流浏览器全部可以适配。