小程序网页view多行文本超出隐藏或显示省略号

实现效果:

限制两行,超出即显示省略号

实现:话不多说,展示代码

关键代码

.box{

width:100rpx;

overflow:hidden;

text-overflow: ellipsis;//超出省略号

display:-webkit-box;

-webkit-line-clamp: 2;//显示行数

-webkit-box-orient: vertical;

}

html 复制代码
<view style="
  width: 100%;//要有宽度,高度可以让文本自适应
  overflow: hidden; //超出隐藏
  text-overflow: ellipsis;//超出省略号可以选择white-space:nowrap;不断行直接显示
  font-size: 26rpx;
  color: #bfbfbf;
  margin: 8rpx 0;
  display:-webkit-box;
  -webkit-line-clamp: 2;//控制行数
  -webkit-box-orient: vertical;
">
这个非常好吃吃吃吃吃踩踩踩从福娃发我发我发达瓦达瓦达瓦大大发</view>
相关推荐
JosieBook4 分钟前
【web应用】Maven:Java 生态的构建与依赖管理利器
java·前端·maven
典学长编程5 分钟前
前端开发(HTML,CSS,VUE,JS)从入门到精通!第六天(Vue)
javascript·css·vue.js·vue·html
鲸落落丶9 分钟前
前端三大核心要素以及前后端通讯
javascript·css·html·jquery
OEC小胖胖11 分钟前
幕后英雄 —— Background Scripts (Service Worker)
开发语言·前端·javascript·浏览器·web·扩展
Monika Zhang11 分钟前
React框架深度解析与主流前端框架对比
前端·react.js·前端框架
云起SAAS19 分钟前
躺平发育小游戏微信抖音流量主小程序开源
小程序·躺平发育小游戏微信抖音流
胡斌附体23 分钟前
小程序省市级联组件使用
前端·javascript·小程序·uniapp·picker级联组件
江城开朗的豌豆25 分钟前
Redux三剑客:揭秘reducer这个'状态改造师'的魔法
前端·javascript·react.js
江城开朗的豌豆28 分钟前
setState vs replaceState:React状态更新的'温柔一刀'与'彻底翻脸'
前端·javascript·react.js
jaqi.l3 小时前
uni-app vue3 小程序接入 aliyun-rtc-wx-sdk
小程序·uni-app·实时音视频