实现单行或多行文本溢出后隐藏并显示省略号
最近写项目遇到一个关于文本溢出隐藏并显示省略号的问题
通过查询文档以及阅读了一些博文之后获益不少，特此记录：
1.单行文本溢出隐藏：
当文本长度超出一行的宽度时，会自动隐藏溢出文字并且最后显示’…’提示用户。
实现方法：
纯css样式：
复制代码
p{
text-overflow: ellipsis;//必须
white-space: nowrap;//必须
overflow: hidden;//必须
}
复制代码
上面为p标签设置的3个css属性是必须，缺一不可，其中：
text-overflow:定义文本溢出时如何处理，有2个有效值：
clip：当内联内容溢出块容器时，将溢出部分裁切掉。
ellipsis：当内联内容溢出块容器时，将溢出部分替换为（…）。
2.多行文本溢出隐藏：
这里有两行文本，第二行文本溢出时，隐藏超出文本并显示’…’
扫描二维码关注公众号，回复：
1214754 查看本文章
与单行文本不同的是，这里不能使用上面的text-overflow属性，这里使用webkit内核浏览器专用方法，所以可以用在移动端。代码：
复制代码
p {
overflow: hidden;//必须
display: -webkit-box;//必须
-webkit-line-clamp: 2;//必须
-webkit-box-orient: vertical;//必须
}
复制代码
上面代码中：
-webkit-line-clamp：设置文本最多显示行数。
-webkit-box-orient：不设置将不显示省略号（…）。