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
相关推荐
tangbin5830851 分钟前
iOS Swift 工具类:数据转换工具 ParseDataTool
前端
潜水豆3 分钟前
AI 时代的前端究竟还能积累什么
前端
www_stdio3 分钟前
手写 instanceof:深入理解 JavaScript 原型与继承机制
前端·javascript·html
boombb7 分钟前
国际化方案:多环境、多语言、动态加载的完整实践
前端
动感小麦兜8 分钟前
NAS学习
java·开发语言·eureka
狗哥哥9 分钟前
我是如何治理一个混乱的 Pinia 状态管理系统的
前端·vue.js·架构
小安同学iter24 分钟前
天机学堂day05
java·开发语言·spring boot·分布式·后端·spring cloud·微服务
一 乐25 分钟前
物业管理|基于SprinBoot+vue的智慧物业管理系统(源码+数据库+文档)
前端·javascript·数据库·vue.js·spring boot
测试人社区—527228 分钟前
你的单元测试真的“单元”吗?
前端·人工智能·git·测试工具·单元测试·自动化·log4j
c骑着乌龟追兔子30 分钟前
Day 32 函数专题1:函数定义与参数
开发语言·前端·javascript