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
相关推荐
薛一半14 小时前
React三大属性之refs
前端·javascript·react.js
yaoxin52112314 小时前
328. Java Stream API - 使用 Optional 的正确姿势:为何、何时、如何使用
java·开发语言
岱宗夫up14 小时前
从代码模式到智能模式:AI时代的设计模式进化论
开发语言·python·深度学习·神经网络·自然语言处理·知识图谱
我命由我1234514 小时前
Visual Studio 文件的编码格式不一致问题:错误 C2001 常量中有换行符
c语言·开发语言·c++·ide·学习·学习方法·visual studio
MR_Promethus14 小时前
【C++类型转换】static_cast、dynamic_cast、const_cast、reinterpret_cast
开发语言·c++
再难也得平14 小时前
[LeetCode刷题]49.字母异位词分组(通俗易懂的java题解)
java·开发语言·leetcode
Lao乾妈官方认证唯一女友:D14 小时前
Ethers.js使用方法
javascript·web3
程序员林北北14 小时前
【前端进阶之旅】Svelte:编译即框架,让前端开发回归简洁
前端·javascript·vue.js·react.js·html5
黎雁·泠崖14 小时前
Java 时间类(中):JDK8 全新时间 API 详细教程
java·开发语言
kong790692814 小时前
Python核心语法-Matplotlib简介
开发语言·python·matplotlib