三种方法
- css样式自带的文本溢出
以下为必要样式
.类名
{
width: 50px; /*设置文本长度,像素或者百分比*/
overflow:hidden; /*溢出的部分隐藏*/
white-space: nowrap; /*文本不换行*/
text-overflow:ellipsis;/*ellipsis:文本溢出显示省略号(...)*/
}
2.过滤器过滤
<!--在要显示的{{}}括号中,加过滤器 -->
<div ">{{item.title | ellipsis}}</div>
export default {
filters: {
ellipsis (value) {
if (!value) return ''
if (value.length >10) {
return value.slice(0,10) + '...'
}
return value
}
},
data() {}
}
这里超10个字数为溢出
3.三目判断
这个不能用在{{}}括号中,要用在绑定值中
这里绑定的值为label
<slot name="label">
<div v-html="label.length > 10 ? label.slice(0, 10) + '...' :label" />
</slot>
补充 : 多行文本超出省略号显示
css样式:
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // 超过3行则显示省略号
word-break: break-all;
如果对你有帮助点个赞哟(^U^)