小程序中經(jīng)常會用到文本單行或多行顯示省略...
實(shí)現(xiàn)方法:
1埠居、在小程序頁面對應(yīng)的.wxml文件查牌,添加如下布局代碼。
<!--index.wxml-->
<view class="singlines">春節(jié)即中國農(nóng)歷新年滥壕,俗稱新春或新歲或歲旦纸颜,是我們最重要的節(jié)日捏浊。</view>
<view class="multilines">春節(jié)即中國農(nóng)歷新年,俗稱新春或新歲或歲旦,是我們最重要的節(jié)日浊洞,春節(jié)歷史悠久牵敷,由上古時代歲首祈歲祭祀演變而來。</view>
2法希、在小程序頁面對應(yīng)的.wxss文件枷餐,添加如下布局代碼。
/**index.wxss**/
.singlines {
width: 100%;
color: #81d13f;
font-size: 36rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space:nowrap;
}
.multilines {
padding-top: 20px;
width: 100%;
color: #5968f0;
font-size: 36rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
內(nèi)容比較簡單毛肋,效果圖如下:
單行或多單省略效果
隨筆記錄屋剑,不喜勿噴润匙。