单行文本、多行文本显示省略号...

一、单行文本

　　.box {

　　　　  width: 200px;

　　　　  overflow: hidden;

　　　　 text-overflow:ellipsis;

　　　　 white-space: nowrap;

　　　  }

二、多行文本

      1. csss实现，适用于webkit内核浏览器、移动端、微信可以，火狐不可以

　　　　.box {

　　　　　　 width: 200px; 

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

　　　        }

　　2. js实现，适用于所有浏览器，原理是截取指定字数的文字

　　　　vue项目用于过滤器：

　　　　　　filters: {
　　　　　　　　//处理多行文本...
　　　　　　　　//示例 {{text | ellipsis(35)}} 35为限制字数
　　　　　　　　ellipsis(text,num) {
　　　　　　　　　　if(text.length > num){
　　　　　　　　　　　　　　return text.substring(0, num) + '...';
　　　　　　　　　　　　}else {
　　　　　　　　　　　　　　return text;
　　　　　　　　　　　　}
　　　　　　　　},

　　　　　　}

　　　　jq项目：

　　　　　　// 文字超出显示...
　　　　　　//示例 ellipsis('.box',86);
　　　　　　function ellipsis(box, num) {
　　　　　　　　　$(box).each(function () {
　　　　　　　　　　　if ($(this).text().length > num) {
　　　　　　　　　　　　　$(this).text($(this).text().substring(0, num) + '…');
　　　　　　　　　　　}
　　　　　　　　　});
　　　　　　}

　　

 

转载于:https://www.cnblogs.com/zhangruiqi/p/11434336.html