移动端和pc端都支持的--多行和单行文本溢出显示省略号设置

移动端和pc端都支持的–多行和单行文本溢出显示省略号设置

例子：
p {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; //行数
-webkit-box-orient: vertical; //多行显示（适用于webkit内核的浏览器和移动端）。
或者text-overflow:ellipsis;overflow:hidden;white-space:nowrap;//单行显示
}
//文本溢出显示省略号设置–兼容性好的方案
.box {
width: 140px; //宽度可以根据情况自行设置。
line-height: 20px; //高度必须设置为行高的3倍。
height: 60px; //高度必须设置为行高的3倍。
border: 1px solid #ccc;
overflow: hidden;
position: relative;
color: #333;
box-sizing: border-box;
word-wrap: break-word;
}
.box:after {
content: “…”;
font-weight: bold;
position: absolute;
bottom: 0;
color: #333;
}
//移动端浏览器绝大部分是WebKit内核的，所以该方法适用于移动端；

-webkit-line-clamp 用来限制在一个块元素显示的文本的行数 , 这是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

display: -webkit-box 将对象作为弹性伸缩盒子模型显示 。

-webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式 。

text-overflow: ellipsis 以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。