如何设置文本溢出显示省略号

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/hua_ban_yu/article/details/83022953

在前端开发中，单行省略号可以直接使用css进行设置，那如何对多行文本进行设置省略号呢？

如果不考虑兼容性问题可以直接使用以下css设置：

overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 3;

但是在开发过程中需要兼容的是各大浏览器，而当下的css样式还无法支持多行设置省略号，最好的方式就是使用js代码设置多行显示省略号。（可以直接去下载lineEllipsis.js文件  https://github.com/lianglijie/lineEllipsis）

使用lineEllipsis设置多行显示省略号：

$lineEllipsis({
id:objId, //要设置多行省略号标签的id
rows:3 //设置超出多少行后显示省略号，默认为两行
})

设置后的效果：

lineEllipsis.js是一个纯JavaScript设置多行省略号的代码，可以直接下载lineEllipsis.js文件然后使用$lineEllipsis()进行调用