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
相关推荐
CnLiang16 小时前
React Compiler Plugin
前端·react.js
willxiao16 小时前
js 单例模式 6 种实现方式
javascript·设计模式
biter down16 小时前
C++ 组合与继承:从设计本质到实战,吃透高内聚低耦合
开发语言·c++
灰灰勇闯IT16 小时前
C语言实战:字符串元音字母提取器的实现与优化
c语言·开发语言
一只爱吃糖的小羊16 小时前
React 19 生命周期:从入门到实战的完整指南
前端·react.js
乔伊酱16 小时前
Bean Searcher 遇“鬼”记:为何我的查询条件偷偷跑进了 HAVING?
java·前端·orm
fantasy5_516 小时前
C++11 核心特性实战博客
java·开发语言·c++
uu_code00716 小时前
字节磨皮算法详解
前端
HashTang16 小时前
【AI 编程实战】第 2 篇:让 AI 成为你的前端架构师 - UniApp + Vue3 项目初始化
前端·vue.js·ai编程
白中白1213816 小时前
Vue系列-1
前端·javascript·vue.js