在前端开发中,单行省略号可以直接使用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()进行调用