欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?qū)崿F(xiàn)多行文字超出部分省略號(hào)顯示功能

 更新時(shí)間:2019年10月23日 09:51:38   作者:MichaelYUE  
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)多行文字 超出部分省略號(hào)顯示功能,比如設(shè)置只顯示2行,超出部分省略號(hào)顯示,本文通過實(shí)例代碼給大家介紹,需要的朋友可以參考下

在開發(fā)小程序: 澳買 的 時(shí)候 遇到一個(gè)棘手的問題:

當(dāng)搜索澳洲產(chǎn)品,獲取產(chǎn)品列表的時(shí)候,有時(shí)候產(chǎn)品的名稱翻譯成中文特別長

我們不能全部在有限的列表里面把產(chǎn)品名都顯示出來,這樣格式不好控制,顯示

出來也不太美觀。

這時(shí)候我們就需要一個(gè)功能:比如設(shè)置只顯示2行,2行顯示不下的情況下我們

用省略號(hào)... 來替代,這樣顯示比較美觀好看,顯示效果如下

其實(shí)實(shí)現(xiàn)也是比較簡單的

工程中樣式文件.wxss內(nèi)容如下:

.productNameText {
 color: rgb(32, 27, 27);
 font-size: 35rpx;
 text-overflow:ellipsis;
 z-index: -1;
 display: -webkit-box;
 word-break: break-all;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 3;
 overflow: hidden;
}

這里-webkit-line-clamp: 3; 主要控制要顯示的行數(shù)

wxml 文件內(nèi)容如下:

......

<!-- produdct name -->
 <view class='productNameView'>
 <text class='productNameText'>{{item.name}}</text>
 </view>

總結(jié)

以上所述是小編給大家介紹的微信小程序?qū)崿F(xiàn)多行文字 超出部分省略號(hào)顯示,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!

相關(guān)文章

最新評論