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
相关推荐
间彧11 分钟前
Tailwind CSS详解
前端
间彧11 分钟前
Headless UI详解
前端
技术净胜17 分钟前
MATLAB二维绘图教程:plot()函数全解析(线条样式/颜色/标记/坐标轴设置)
开发语言·matlab
Slow菜鸟38 分钟前
Java开发规范(八)| 安全规范—企业级应用的“架构级底线”
java·开发语言·安全
憨憨崽&1 小时前
进击大厂:程序员必须修炼的算法“内功”与思维体系
开发语言·数据结构·算法·链表·贪心算法·线性回归·动态规划
han_1 小时前
Vue.js 为什么要推出 Vapor Mode?
前端·javascript·vue.js
毕设源码-邱学长1 小时前
【开题答辩全过程】以 基于Java的公职备考在线学习系统的设计与实现为例,包含答辩的问题和答案
java·开发语言·学习
oden1 小时前
AI重构10000行老代码:2周完成1个月工作量的真实复盘
前端·aigc·ai编程
小满zs1 小时前
Next.js第十二章(RSC/服务端组件/客户端组件)
前端
二川bro2 小时前
模型部署实战:Python结合ONNX与TensorRT
开发语言·python