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
相关推荐
源代码•宸10 分钟前
GoLang八股(Go语言基础)
开发语言·后端·golang·map·defer·recover·panic
布列瑟农的星空19 分钟前
WebAssembly入门(一)——Emscripten
前端·后端
rit843249919 分钟前
基于MATLAB的SUSAN特征检测算子边缘提取实现
开发语言·matlab
g***557521 分钟前
Java高级开发进阶教程之系列
java·开发语言
贵州数擎科技有限公司22 分钟前
一批优质 AI 域名转让(.ai)|适合 AI 创业 / 产品 / 公司品牌
前端
小二·28 分钟前
微前端架构完全指南:qiankun 与 Module Federation 双方案深度对比(Vue 3 + TypeScript)
前端·架构·typescript
鲁正杰29 分钟前
【运维部署】现代化内网穿透与文件共享方案 (Rust)
运维·开发语言·rust
EndingCoder1 小时前
枚举类型:常量集合的优雅管理
前端·javascript·typescript
2401_876907521 小时前
USB TYPE-C 公头连接器设计规范总结:提升可靠性、降本增效的关键指南
c语言·开发语言·设计规范
Electrolux1 小时前
[wllama]纯前端实现大语言模型调用:在浏览器里跑 AI 是什么体验。以调用腾讯 HY-MT1.5 混元翻译模型为例
前端·aigc·ai编程