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
相关推荐
快递鸟1 小时前
物流信息总滞后?快递鸟在途监控 API,毫秒级响应让物流透明不等待
前端
zhong liu bin2 小时前
Java并发编程【JUC】【一】
java·开发语言·juc
小蹦跶儿2 小时前
解决Webpack 打包报错:TypeError: Cannot assign to read only property 'exports' ?
javascript·vue.js·webpack
fruge2 小时前
前端注释规范:如何写“后人能看懂”的注释(附示例)
前端
小飞大王6662 小时前
JavaScript基础知识总结(四):常见内置构造函数,正则表达式,作用域与闭包
前端·javascript·正则表达式
3秒一个大2 小时前
Ajax 数据请求详解:从概念到实战
javascript
fire-flyer2 小时前
设计模式之观察者模式
java·开发语言
咬_咬2 小时前
C++仿muduo库高并发服务器项目:Poller模块
服务器·开发语言·c++·epoll·muduo
清凉夏日2 小时前
Flutter 国际化完整指南
前端·flutter
Jony_2 小时前
动态代理机制
前端