文字内容超出两行时显示省略号

<view class="newsTitle">
	这里是一条很长很长很长的内容
</view>

设置内容超出两行显示省略号的css样式如下:

.newsTitle{
	width: 536rpx;  //设置宽度
	font-size: 32rpx;
	font-weight: 700;
	line-height: 52rpx;
	text-align: left;
	color: #333333;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;  //使用自适应布局
	-webkit-line-clamp: 2;  //设置超出行数,要设置超出几行显示省略号就把这里改成几
	-webkit-box-orient: vertical;
}

这个样式可用于uniapp的微信小程序开发。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐