uniappX 移动端单行/多行文字隐藏显示省略号
在手机端不能多行省略使用 -webkit-line-clamp 属性所以移动端多行省略不会生效改为 lines 属性即可
/**单行文本溢出显示省略号*/
.text-ov1 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: auto;
}
/**APP多行文本溢出显示省略号*/
// #ifdef APP-ANDROID
@for $i from 2 through 5 {
.text-ov#{$i} {
overflow: hidden;
text-overflow: ellipsis;
lines: $i;
height: auto;
}
}
// #endif
/**web多行文本溢出显示省略号*/
// #ifdef H5
@for $i from 2 through 5 {
.text-ov#{$i} {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: $i;
line-clamp: $i;
-webkit-box-orient: vertical;
height: auto;
}
}
// #endif