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
相关推荐
lizhongxuan3 小时前
Claude Code 防上下文爆炸:源码级深度解析
前端·后端
紫金修道3 小时前
【DeepAgent】概述
开发语言·数据库·python
Via_Neo3 小时前
JAVA中以2为底的对数表示方式
java·开发语言
书到用时方恨少!3 小时前
Python multiprocessing 使用指南:突破 GIL 束缚的并行计算利器
开发语言·python·并行·多进程
cch89183 小时前
PHP五大后台框架横向对比
开发语言·php
天真萌泪4 小时前
JS逆向自用
开发语言·javascript·ecmascript
野生技术架构师4 小时前
一线大厂Java面试八股文全栈通关手册(含源码级详解)
java·开发语言·面试
柳杉5 小时前
震惊!字符串还能这么玩!
前端·javascript
Q一件事5 小时前
R语言制图-相关性及关系网络图
开发语言·r语言
坊钰5 小时前
Java 死锁问题及其解决方案
java·开发语言·数据库