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
相关推荐
bubiyoushang8882 分钟前
MATLAB实现机械臂GUI仿真系统
开发语言·matlab
老前端的功夫4 分钟前
前端技术选型的理性之道:构建可量化的ROI评估模型
前端·javascript·人工智能·ubuntu·前端框架
听风吟丶4 分钟前
Java 高级多线程编程:从虚拟线程到结构化并发的实战演进
java·开发语言
lijiatu1008612 分钟前
C++ 类成员变量声明语法错误
java·开发语言·c++
zore_c14 分钟前
【C语言】带你层层深入指针——指针详解2
c语言·开发语言·c++·经验分享·笔记
狮子座的男孩15 分钟前
js函数高级:04、详解执行上下文与执行上下文栈(变量提升与函数提升、执行上下文、执行上下文栈)及相关面试题
前端·javascript·经验分享·变量提升与函数提升·执行上下文·执行上下文栈·相关面试题
Monly2120 分钟前
Java八股文:Redis篇
java·开发语言·redis
爱学习的程序媛27 分钟前
《JavaScript权威指南》核心知识点梳理
开发语言·前端·javascript·ecmascript
帮帮志31 分钟前
【AI大模型对话】流式输出和非流式输出的定义和区别
开发语言·人工智能·python·大模型·anaconda
陈奕昆31 分钟前
n8n实战营Day1课时2:核心概念拆解+天气提醒工作流实操
开发语言·人工智能·n8n