css方式省略号:
用省略号代替文字溢出部分,分为两种情况,一种是单行时,另一种是多行时
<span class="nav" ::title="item.roleName">{{item.roleName}}</span>
单行:
.nav{
display:block; /*转换为块级元素*/
width:50px; /*根据个人需要自定义宽度*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
多行时的样式,(有兼容问题,该方法只适用于Webkit浏览器及移动端)
.nav{
display: block;
width:100px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /*控制文本行数*/
overflow: hidden;
}
解决多行的兼容性问题:
.nav{
display:block; /*转换为块级元素*/
position: relative;
line-height: 20px;
width: 100px;
height: 40px; /*根据自己需求设置宽度和高度,其实时控制行数*/
overflow: hidden;
}
.nav::after{
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(left, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
js省略号:
<div :title="item.roleName">{{item.roleName.length>10?item.roleName.substing(0,10)+'...':item.roleName}}</div>