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
相关推荐
布局呆星3 分钟前
闭包与装饰器
开发语言·python
fyzy14 分钟前
C++写后端实现,实现前后端分离
开发语言·c++
全栈测试笔记15 分钟前
异步函数与异步生成器
linux·服务器·前端·数据库·python
huohuopro16 分钟前
Mybatis的七种传参方式
java·开发语言·mybatis
Lee_SmallNorth17 分钟前
变态需求之【角色不同访问数据库的用户不同】
java·开发语言·数据库
扶苏-su19 分钟前
Java网络编程:InetAddress 详解
java·开发语言·网络
EndingCoder32 分钟前
配置 tsconfig.json:高级选项
linux·前端·ubuntu·typescript·json
木风小助理38 分钟前
JavaStreamAPI的性能审视,优雅语法背后的隐形成本与优化实践
java·前端·数据库
IOT-Power1 小时前
QT构建构建DataBus总线
开发语言·qt
Ophelia(秃头版1 小时前
JS事件循环与NodeJS事件循环(libuv)
开发语言·javascript