微信小程序文字控制單行超過顯示省略号

在小程序開發過程中,經常會遇到一些數據無法在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的數字,就可以實現對應的需求了。

猜你喜歡