使用混合mixins中的变量来定义一个n行文本溢出隐藏的公用样式。
1、创建mixins.scss文件
//文本n行溢出隐藏
@mixin ellipsisBasic($clamp:2) {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $clamp;
}
//$clamp是变量,决定最多显示几行文本,默认是显示2行,调用的时候可自行传参设置。
2、在组件中使用:
<style rel="stylesheet/scss" lang="scss" scoped>
@import '@/assets/css/mixin.scss';//引用此混合样式
p {
line-height: 0.42rem;
@include ellipsisBasic;//使用此混合样式,默认显示2行
}
p {
width: 100%;
line-height: 0.42rem;
@include ellipsisBasic(3);//使用此混合样式,默认显示3行
font-size: 0.28rem;
margin-top: 0.37rem;
}
</style>