用css控制显示多余文本隐藏并显示省略号

之前做过一个需求，隐藏多余的文本内容，显示省略号，然后我用截取文本长度的方式实现了。中途还考虑过中文字符长度较长还弄了个算法判断中文字符的长度加1。但是后来又出现一个问题，就是在不同的浏览器下元素块的宽高样式不一致的问题。拿到这个需求的时候我的思路是根据元素块高宽和字符大小和行高计算文本的长度。但是在想偷懒查询网上有没有现成方法时发现竟然可以用css实现这个需求。

text-overflow: clip|ellipsis|string;

string类型在不同的浏览器兼容上有问题。不过clip剪切和ellipsis省略号是可以用的。

隐藏前

单行省略号

text-overflow: ellipsis;
width: 100px;//必须限制宽度
white-space: nowrap;//限制换行
overflow: hidden;//隐藏超出部分

多行省略号

text-overflow: ellipsis;
width: 100px;//必须限制宽度
overflow: hidden;
-webkit-line-clamp: 3;//需要控制的行数
-webkit-box-orient: vertical;//必需
display: -webkit-box;//必需