文本溢出
- 作者: 阳光下歇斯底里的轻笑22817050
- 来源: 51数据库
- 2021-08-07
文本溢出
- 单行文本溢出样式
- wxml结构
- wxss样式代码
- 效果图
- 多行文本溢出样式
- wxml结构
- wxss样式代码
- 效果图
- 此样式同样适用于html css,只是微信小程序和html结构元素标签不同
单行文本溢出样式
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结构元素标签不同
推荐阅读
