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 分钟前
再来聊聊,Vue3 项目中 Pinia 的替代方案
前端·面试
u***u6859 分钟前
Kotlin多平台开发实践
android·开发语言·kotlin
Q***K5512 分钟前
Kotlin与Java互操作指南
java·开发语言·kotlin
星月前端18 分钟前
[特殊字符]面向 ArcGIS for JavaScript(4.x)开发者的「坐标系统(CRS / 投影)」全面解读
开发语言·javascript·arcgis
星空的资源小屋1 小时前
永久删除文件利器:Permadelete
java·javascript·人工智能
柒昀1 小时前
Vue.js
前端·javascript·vue.js
2201_757830871 小时前
Stream的终结方法
java·服务器·前端
进阶的鱼1 小时前
React+ts+vite脚手架搭建(五)【登录篇】
前端·javascript
safestar20121 小时前
React深度实战:从组件抽象到性能优化的思考历程
前端·javascript·react.js
lqj_本人1 小时前
深入解析Qt for OpenHarmony的CMake构建系统与常见陷阱
开发语言·qt