loading请求处理中...

微信小程序文字控制单行超过显示省略号

2021-12-03 07:17:05 阅读 11317次 标签: 开发 作者: yipinweike01

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

只需要在对应的text中设置下面的css就可以了。

overflow:hidden; //超出一行文字自动隐藏 
text-overflow:ellipsis; //文字隐藏后添加省略号
white-space:nowrap; //强制不换行

不过上面的css只能保证单行显示隐藏,如果想要2,3,n行隐藏呢?这个要求其实也是可以通过css做到的。下面贴出css:

display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

只要改变其中-webkit-line-clamp的数字,就可以实现对应的需求了。

  今天小编就为大家分享到这里啦,如果觉得自己还想了解更多,欢迎大家上我们一品威客的网站,里面有更多丰富的相关内容等着大家去挖掘哦!如果你需要app开发网络推广设计,文案写作,营销策划等服务,欢迎到一品威客网发布法律服务相关任务,让广大的服务商为您解决难题


Tag: 文字

开发公司推荐

成为一品威客服务商,百万订单等您来有奖注册中

留言( 展开评论

快速发任务

价格是多少?怎样找到合适的人才?

官方顾问免费为您解答

 
相关任务
DESIGN TASK 更多
智能开关木门的软硬件开发

¥10000 已有0人投标

QGIS专业开发人员

¥10000 已有0人投标

CRM软件开发

¥20000 已有4人投标

数据分析软件开发

¥5000 已有1人投标

信息发布系统 源码定制开发

¥100000 已有2人投标

开发windows电脑端激活程序

¥1000 已有2人投标

STM32 OTA软件开发

¥100 已有0人投标

开发店中店电商平台

¥5000 已有2人投标