小程序网页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>
相关推荐
G等你下课22 分钟前
告别刷新就丢数据!localStorage 全面指南
前端·javascript
该用户已不存在23 分钟前
不知道这些工具,难怪的你的Python开发那么慢丨Python 开发必备的6大工具
前端·后端·python
爱编程的喵25 分钟前
JavaScript闭包实战:从类封装到防抖函数的深度解析
前端·javascript
LovelyAqaurius25 分钟前
Unity URP管线着色器库攻略part1
前端
Xy91028 分钟前
开发者视角:App Trace 一键拉起(Deep Linking)技术详解
java·前端·后端
lalalalalalalala31 分钟前
开箱即用的 Vue3 无限平滑滚动组件
前端·vue.js
前端Hardy31 分钟前
8个你必须掌握的「Vue」实用技巧
前端·javascript·vue.js
snakeshe101033 分钟前
深入理解 React 中 useEffect 的 cleanUp 机制
前端
星月日35 分钟前
深拷贝还在用lodash吗?来试试原装的structuredClone()吧!
前端·javascript
爱学习的茄子36 分钟前
JavaScript闭包实战:解析节流函数的精妙实现 🚀
前端·javascript·面试