uniappX 移动端单行/多行文字隐藏显示省略号

在手机端不能多行省略使用 -webkit-line-clamp 属性所以移动端多行省略不会生效改为 lines 属性即可

css 复制代码
/**单行文本溢出显示省略号*/
.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
相关推荐
喵个咪11 分钟前
Qt 6 实战:C++ 调用 QML 回调方法(异步场景完整实现)
前端·c++·qt
立志成为大牛的小牛18 分钟前
数据结构——五十一、散列表的基本概念(王道408)
开发语言·数据结构·学习·程序人生·算法·散列表
g***B73823 分钟前
JavaScript数据可视化应用
javascript·信息可视化·数据分析
F***c32529 分钟前
React自然语言处理应用
前端·react.js·自然语言处理
1***Q78435 分钟前
React项目
前端·javascript·react.js
幸福专买店37 分钟前
【Flutter】flutter 中 包裹内容显示 的设置方式
前端·javascript·flutter
U***49831 小时前
React Native性能分析
javascript·react native·react.js
和和和1 小时前
🗣️面试官: 那些常见的前端面试场景问题
前端·javascript·面试
lxp1997411 小时前
vue笔记摘要-更新中
前端·vue.js·笔记
Oriental1 小时前
URL解码踩坑记录
前端·后端