微信小程序文字控制單行超過顯示省略號
發(fā)布時(shí)間：2021-07-09 10:02 所屬欄目：小程序開發(fā)教程
在小程序開發(fā)過程中，經(jīng)常會遇到一些數(shù)據(jù)無法在text中完全展示，所以會使用到隱藏相關(guān)文字，并在后方加上省略號(...)。
只需要在對應(yīng)的text中設(shè)置下面的css就可以了。
overflow:hidden; //超出一行文字自動(dòng)隱藏 text-overflow:ellipsis; //文字隱藏后添加省略號 white-space:nowrap; //強(qiáng)制不換行 |
不過上面的css只能保證單行顯示隱藏，如果想要2，3，n行隱藏呢？這個(gè)要求其實(shí)也是可以通過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的數(shù)字，就可以實(shí)現(xiàn)對應(yīng)的需求了。
易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源
碼云倉庫:
本文地址：http://www.szcjxy.com/wxmini/doc/course/27088.html 復(fù)制鏈接
如需定制請聯(lián)系易優(yōu)客服咨詢： 點(diǎn)擊咨詢
