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 分钟前
技术基石与职场进阶:构建从Web后端到高性能架构的完整知识图谱
前端·架构·知识图谱
萧鼎9 分钟前
深入解析 Python 的 Word 模板引擎:docxtpl 全面指南
开发语言·python·word
木木木一9 分钟前
Rust学习记录--C9 错误处理
前端·学习·rust
Chan1610 分钟前
场景题:如何设计一个分布式ID
java·开发语言·spring boot·java-ee·intellij-idea
局外人LZ11 分钟前
libsodium.js:web端与 Node.js 的现代加密工具集,构建前端安全加密体系
前端·javascript·node.js
chamu9916 分钟前
C++ 的可调用对象
开发语言·c++
xkxnq16 分钟前
第二阶段:Vue 组件化开发(第 20天)
前端·javascript·vue.js
tianyuanwo16 分钟前
Bash与Sh的诞生背景、底层原理及Linux多Shell解释器兼容性解析
linux·开发语言·bash
哈__19 分钟前
React Native 鸿蒙跨平台开发:Keyboard 键盘控制
javascript·react native·react.js
「、皓子~19 分钟前
AI 创作系列(34)海狸IM桌面版 v1.1 正式发布:Vite + Electron 性能优化与体验升级
前端·人工智能·electron·开源·开源软件·im