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
相关推荐
行走的陀螺仪32 分钟前
GitLab CI/CD 完整教学指南
前端·ci/cd·gitlab·团队开发·自动化测试部署
2301_7951672042 分钟前
Python 高手编程系列八:缓存
开发语言·python·缓存
谢尔登44 分钟前
Webpack高级之常用配置项
前端·webpack·node.js
helloyangkl1 小时前
前端——不同环境下配置env
前端·javascript·react.js
竹秋…1 小时前
webpack搭建react开发环境
前端·react.js·webpack
8***29311 小时前
Go基础之环境搭建
开发语言·后端·golang
以明志、1 小时前
并行与并发
前端·数据库·c#
提笔了无痕1 小时前
go web开发表单知识及表单处理详解
前端·后端·golang·web
Yue丶越1 小时前
【C语言】自定义类型:联合体与枚举
c语言·开发语言
甜味弥漫1 小时前
JavaScript新手必看系列之预编译
前端·javascript