小程序网页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>
相关推荐
流***陌5 分钟前
手办盲盒抽赏小程序前端功能设计:兼顾收藏需求与抽赏乐趣
前端·小程序
Tencent_TCB8 分钟前
云开发CloudBase AI+实战:快速搭建AI小程序全流程指南
人工智能·ai·小程序·ai编程·云开发
岁月宁静33 分钟前
在富文本编辑器中封装实用的 AI 写作助手功能
前端·vue.js·人工智能
金士顿38 分钟前
为什么MainWindow.xaml绑定的datacontext,EtherCATSuiteCtrl.xaml直接用了?
前端
533_42 分钟前
[css] flex布局中的英文字母不换行问题
前端·css
浮游本尊1 小时前
React 18.x 学习计划 - 第四天:React Hooks深入
前端·学习·react.js
future_studio1 小时前
聊聊 Unity(小白专享、C# 小程序 之 日历、小闹钟)
前端·html
Yeats_Liao2 小时前
Go Web 编程快速入门 · 04 - 请求对象 Request:头、体与查询参数
前端·golang·iphone
祈祷苍天赐我java之术2 小时前
Redis 数据类型与使用场景
java·开发语言·前端·redis·分布式·spring·bootstrap
说私域3 小时前
“开源AI大模型AI智能名片S2B2C商城小程序”视角下的教育用户策略研究
人工智能·小程序