微信小程序單行和多行省略號

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

 

參見-webkit-line-clamp 多行文字溢出....