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
相关推荐
网安INF3 分钟前
RSA加密算法:非对称密码学的基石
java·开发语言·密码学
christine-rr3 分钟前
征文投稿:如何写一份实用的技术文档?——以软件配置为例
运维·前端·网络·数据库·软件构建
明月*清风3 分钟前
c++ —— 内存管理
开发语言·c++
_骁5 分钟前
记两次谷歌浏览器升级引起的bug
前端
蔡蓝8 分钟前
设计模式-观察着模式
java·开发语言·设计模式
轻语呢喃14 分钟前
DeepSeek 接口调用:从 HTTP 请求到智能交互
javascript·deepseek
风之舞_yjf1 小时前
Vue基础(14)_列表过滤、列表排序
前端·javascript·vue.js
西北大程序猿1 小时前
单例模式与锁(死锁)
linux·开发语言·c++·单例模式
belldeep1 小时前
QuickJS 如何发送一封邮件 ?
javascript·curl·smtp·quickjs
你不是我我1 小时前
【Java开发日记】说一说 SpringBoot 中 CommandLineRunner
java·开发语言·spring boot