欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

文本溢出

程序员文章站 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

相关标签: css html css3