新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
微信小程序怎么實(shí)現(xiàn)多行文字超出部分省略號顯示功能-創(chuàng)新互聯(lián)
小編給大家分享一下微信小程序怎么實(shí)現(xiàn)多行文字超出部分省略號顯示功能,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
在開發(fā)小程序: 澳買 的 時(shí)候 遇到一個(gè)棘手的問題:
當(dāng)搜索澳洲產(chǎn)品,獲取產(chǎn)品列表的時(shí)候,有時(shí)候產(chǎn)品的名稱翻譯成中文特別長
我們不能全部在有限的列表里面把產(chǎn)品名都顯示出來,這樣格式不好控制,顯示
出來也不太美觀。
這時(shí)候我們就需要一個(gè)功能:比如設(shè)置只顯示2行,2行顯示不下的情況下我們
用省略號... 來替代,這樣顯示比較美觀好看,顯示效果如下
其實(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)容如下:
......
{{item.name}}
看完了這篇文章,相信你對“微信小程序怎么實(shí)現(xiàn)多行文字超出部分省略號顯示功能”有了一定的了解,如果想了解更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!
分享題目:微信小程序怎么實(shí)現(xiàn)多行文字超出部分省略號顯示功能-創(chuàng)新互聯(lián)
分享鏈接:http://ef60e0e.cn/article/pgcec.html