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 小时前
前端 HTML 入门(标签)
前端·html
智航GIS3 小时前
7.1 自定义函数
前端·javascript·python
BlackWolfSky3 小时前
React中文网课程笔记1—快速入门
前端·笔记·react.js
阿里嘎多学长3 小时前
2025-12-31 GitHub 热点项目精选
开发语言·程序员·github·代码托管
A_one20103 小时前
利用npm内置命令构建脚本工具
前端·npm·node.js
哔哩哔哩技术3 小时前
2025年哔哩哔哩技术精选技术干货
前端·后端·架构
霍理迪3 小时前
CSS布局方式——定位
前端·css
无限进步_3 小时前
【C语言】循环队列的两种实现:数组与链表的对比分析
c语言·开发语言·数据结构·c++·leetcode·链表·visual studio
星光不问赶路人3 小时前
TypeScript 架构实践:从后端接口到 UI 渲染数据流的完整方案
前端·vue.js·typescript
ttyyttemo3 小时前
Dagger技术的使用学习
前端