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
相关推荐
愛芳芳1 天前
基于 Electron + Vue3 的仿 PC 微信客户端项目实战
前端·javascript·css·elementui·typescript·electron·vue
阿虎儿1 天前
论 JavaScript 的怪异之处
javascript
执明wa1 天前
Android RecyclerView 多类型, 多种 Item
android·xml·开发语言·设计模式·android studio
程序员yu1 天前
数智码力:Python作用域完全梳理,全局变量局部变量不再混乱
开发语言·python·学习
你别说话了1 天前
Vue实现高效拖拽效果 vue-Draggable
前端·vue.js
万物智能1 天前
PWM散热风扇设置—【万物智能之开源鸿蒙OpenHarmony系统实战开发系列教程】
前端·后端·算法
前端柱子1 天前
q-floodfill白边锯齿?一招搞定抗锯齿边缘问题
前端
阿虎儿1 天前
我的 HTML 样板(HTML Boilerplate)
前端·html
Amos_Web1 天前
Rspack 源码解析(八):Module、Chunk 与 Runtime ID
前端·rust·源码阅读