文本溢出
程序员文章站
2022-03-31 07:58:42
文本溢出单行文本溢出样式wxml结构wxss样式代码效果图多行文本溢出样式wxml结构wxss样式代码效果图此样式同样适用于html css,只是微信小程序和html结构元素标签不同单行文本溢出样式wxml结构 &l...
文本溢出
单行文本溢出样式
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