省略号。。。（css与vue下的js方式）

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>