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
相关推荐
Hui Baby7 分钟前
浅谈MCP原理
开发语言
xuansec10 分钟前
【Web攻防】文件与目录安全漏洞详解:下载/删除/遍历/穿越实操指南
前端
Beginner x_u13 分钟前
CSS 动画体系(二)—— Animation关键帧动画
前端·css·animation
2345VOR15 分钟前
【QT的pyside6开发使用】
开发语言·qt
Ronin30519 分钟前
【Qt常用控件】控件概述和QWidget 核心属性
开发语言·qt·常用控件·qwidget核心属性
故事和你9119 分钟前
sdut-程序设计基础Ⅰ-实验二选择结构(1-8)
大数据·开发语言·数据结构·c++·算法·优化·编译原理
T-shmily20 分钟前
CSS Grid 网格布局(display: grid)全解析
前端·css
跟着珅聪学java31 分钟前
electron 安装教程
javascript·arcgis·electron
温柔一只鬼.31 分钟前
GUI学习——day2
java·开发语言·学习
yongui4783432 分钟前
离散偶极子近似(DDA)求解颗粒散射的MATLAB实现
开发语言·matlab