小程序模板:专业的小程序模板与静态模板分享平台
小程序
教程
搜索
当前位置 : 首页> 小程序教程> 微信小程序文字超过行后隐藏并且显示省略号

微信小程序文字超过行后隐藏并且显示省略号

在小程序开发过程中,经常会遇到一些数据无法在text中完全展示,所以会使用到隐藏相关文字,并在后方加上省略号(...)。那么怎么展示呢?

单行超出字数隐藏显示省略号

/* 单行隐藏字数,超出按照省略号 */
overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;

多行:

display:-webkit-box;
word-break: break-all; 
-webkit-box-orient:vertical;  /*子元素排列 vertical(竖排)*/
-webkit-line-clamp:5;    /*设置显示的多少行。*/
overflow: hidden;
text-overflow:ellipsis;

例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。

联系客服 意见反馈

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了