微信小程序的多行文本溢出
单行文本溢出样式
wxml结构
<scroll-view enable-flex scroll-x class="scrollContainer">
<view class="scrollItem" wx:key="id" wx:for="{{recommendedSongList}}">
<image mode="widthFix" src="{{item.picUrl}}" />
<text>{{item.name}}</text>
</view>
</scroll-view>
wxss样式代码
text{
display: block;
white-space: nowrap;
// verflow作用在块级元素上面,行内就失效
overflow: hidden;
// 溢出省略号
text-overflow: ellipsis;
}
效果图
多行文本溢出样式
wxml结构
wxml结构与上面的一样
wxss样式代码
text{
// overflow作用在块级元素上面,行内就失效
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;//溢出省略号
-webkit-box-orient: vertical; //设置对齐模式
-webkit-line-clamp: 2;// 这个是设置文本的行数
}