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
相关推荐
%xiao Q10 分钟前
GESP C++四级-216
java·开发语言·c++
西红市杰出青年11 分钟前
Python异步----------信号量
开发语言·python
Ama_tor25 分钟前
obsidian进阶の插件系列|Templater从小白到菜鸟
javascript·markdown·插件·obsidian
WordPress学习笔记31 分钟前
解决Bootstrap下拉菜单一级链接无法点击的问题
前端·bootstrap·html
Never_Satisfied39 分钟前
C#插值字符串中大括号表示方法
前端·c#
wuhen_n41 分钟前
初识TypeScript
javascript·typescript
a程序小傲42 分钟前
蚂蚁Java面试被问:向量数据库的相似度搜索和索引构建
开发语言·后端·python·架构·flask·fastapi
w***76551 小时前
JS vs jQuery:核心差异解析
开发语言·javascript·jquery
黎雁·泠崖1 小时前
Java面向对象:购物车系统完整版+全系列考点复盘
java·开发语言
初次见面我叫泰隆1 小时前
Qt——2、信号和槽
开发语言·c++·qt