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
相关推荐
蓝天智能5 分钟前
QT QML交互原理:信号与槽机制
开发语言·qt·交互
Jonathan Star16 分钟前
跨域处理的核心是解决浏览器的“同源策略”限制,主流方案
javascript·chrome·爬虫
洛小豆19 分钟前
她问我::is-logged 是啥?我说:前面加冒号,就是 Vue 在发暗号
前端·vue.js·面试
十五年专注C++开发21 分钟前
C++类型转换通用接口设计实现
开发语言·c++·跨平台·类设计
我有一棵树24 分钟前
前端开发中 SCSS 变量与 CSS 变量的区别与实践选择,—— 两种变量别混为一谈
前端·css·scss
im_AMBER28 分钟前
杂记 15
java·开发语言·算法
Zzz 小生39 分钟前
编程基础学习(一)-Python基础语法+数据结构+面向对象全解析
开发语言·python
white-persist40 分钟前
JWT 漏洞全解析:从原理到实战
前端·网络·python·安全·web安全·网络安全·系统安全
果粒chenl1 小时前
React学习(四) --- Redux
javascript·学习·react.js
沐知全栈开发1 小时前
Bootstrap4 表格详解
开发语言