关于单行和多行文字溢出用省略号表示

实现单行或多行文本溢出后隐藏并显示省略号

最近写项目遇到一个关于文本溢出隐藏并显示省略号的问题

通过查询文档以及阅读了一些博文之后获益不少，特此记录：

1.单行文本溢出隐藏：

当文本长度超出一行的宽度时，会自动隐藏溢出文字并且最后显示’…’提示用户。

实现方法：

纯css样式：

复制代码
p{
text-overflow: ellipsis;//必须
white-space: nowrap;//必须
overflow: hidden;//必须
}

复制代码
上面为p标签设置的3个css属性是必须，缺一不可，其中：

text-overflow:定义文本溢出时如何处理，有2个有效值：

clip：当内联内容溢出块容器时，将溢出部分裁切掉。
ellipsis：当内联内容溢出块容器时，将溢出部分替换为（…）。
2.多行文本溢出隐藏：
这里有两行文本，第二行文本溢出时，隐藏超出文本并显示’…’

与单行文本不同的是，这里不能使用上面的text-overflow属性，这里使用webkit内核浏览器专用方法，所以可以用在移动端。代码：

复制代码
p {
overflow: hidden;//必须
display: -webkit-box;//必须
-webkit-line-clamp: 2;//必须
-webkit-box-orient: vertical;//必须
}
复制代码
上面代码中：

-webkit-line-clamp：设置文本最多显示行数。
-webkit-box-orient：不设置将不显示省略号（…）。