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
相关推荐
ShineWinsu4 小时前
对于C++:继承的解析—上
开发语言·数据结构·c++·算法·面试·笔试·继承
小付同学呀4 小时前
C语言学习(五)——输入/输出
c语言·开发语言·学习
梦幻精灵_cq4 小时前
学C之路:不可或缺的main()主函数框架(Learn-C 1st)
c语言·开发语言
love530love4 小时前
Scoop 完整迁移指南:从 C 盘到 D 盘的无缝切换
java·服务器·前端·人工智能·windows·scoop
消失的旧时光-19435 小时前
C++ 多线程与并发系统取向(二)—— 资源保护:std::mutex 与 RAII(类比 Java synchronized)
java·开发语言·c++·并发
王码码20355 小时前
Flutter for OpenHarmony:Flutter 三方库 bluez 玩转 Linux 风格的蓝牙操作(蓝牙底层互操作)
linux·运维·服务器·前端·flutter·云原生·harmonyos
福大大架构师每日一题6 小时前
go-zero v1.10.0发布!全面支持Go 1.23、MCP SDK迁移、性能与稳定性双提升
开发语言·后端·golang
五阿哥永琪6 小时前
1. 为什么java不能用is开头来做布尔值的参数名,会出现反序列化异常。
java·开发语言
逻极7 小时前
pytest 入门指南:Python 测试框架从零到一(2025 实战版)
开发语言·python·pytest
你的冰西瓜7 小时前
C++ STL算法——排序和相关操作
开发语言·c++·算法·stl