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 分钟前
python中的异步调用(直接使用教程)
java·前端·python
摘星编程11 分钟前
React Native + OpenHarmony:Modal确认取消弹窗
javascript·react native·react.js
ShineWinsu13 分钟前
对于C++:模版初阶的解析
开发语言·c++·面试·笔试·函数··模版
xkxnq13 分钟前
第四阶段:Vue 进阶与生态整合(第 47 天)(Vue 项目目录结构解析:每个文件夹的作用与规范)
前端·javascript·vue.js
Max_uuc18 分钟前
【C++ 硬核】告别 Excel 生成数组:利用 constexpr 实现编译期计算查找表 (LUT)
开发语言·c++·excel
墨雨晨曦8825 分钟前
leedcode刷题总结
java·开发语言
炽烈小老头26 分钟前
浏览器渲染原理:从 HTML 到像素的全链路拆解
前端
打小就很皮...27 分钟前
React 合同审查组件:按合同原文定位
前端·react.js·markdown
嫂子开门我是_我哥28 分钟前
第十六节:异常处理:让程序在报错中稳定运行
开发语言·python
a努力。35 分钟前
中国邮政Java面试被问:MySQL的ICP(索引条件下推)优化原理
java·开发语言·数据仓库·面试·职场和发展·重构·maven