html 点击展开显示全部,多行溢出省略号显示及点击展开（css/js）实现！

关于多行溢出显示省略号的问题，如果是根据字符的长度个数限制 超过部分替换为省略号，这种还是很好处理的，关键是根据行数，在未知情况下你不知道需要多少内容，去填满一个元素，做起来还是比较麻烦的，网上很多种乱七八糟的方案，拿过来又不能直接用，，我就结合网上的思路重新整理修改一波可以直接用的几种方案。

一、单行溢出出现省略号显示：

张艺兴张艺兴张艺兴张艺兴张艺兴

样式：

.p{

width:1rem;

overflow:hidden;//超出部分隐藏

white-space:nowrap;//禁止换行

text-overflow:ellipsis//省略号

}

复制代码

图：

二、多行溢出出现省略号(css方案)：

这样方案简单易懂，但是存在兼容性，只适用于在webkit浏览器或者移动端。

小绵羊小绵羊小绵羊小绵羊小绵羊小绵羊