文本溢出

文本溢出

• 单行文本溢出样式
• 多行文本溢出样式

单行文本溢出样式

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;// 这个是设置文本的行数
}

效果图

此样式同样适用于html css,只是微信小程序和html结构元素标签不同

本文地址：https://blog.csdn.net/qq_44371705/article/details/110195779