在小程序開發(fā)過程中,經(jīng)常會(huì)遇到一些數(shù)據(jù)無法在text中完全展示,所以會(huì)使用到隱藏相關(guān)文字,并在后方加上省略號(hào)(...)。
只需要在對(duì)應(yīng)的text中設(shè)置下面的css就可以了。
overflow:hidden; //超出一行文字自動(dòng)隱藏 text-overflow:ellipsis; //文字隱藏后添加省略號(hào) 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)對(duì)應(yīng)的需求了。
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)