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

陈序媛圈圈

于 2022-05-05 14:43:38 发布

阅读量6.2k

点赞数

分类专栏： uniapp开发微信小程序遇到的问题 css 文章标签：微信小程序 css 前端

本文链接：https://blog.csdn.net/weixin_44825338/article/details/124588411

版权

uniapp开发微信小程序遇到的问题同时被 2 个专栏收录

6 篇文章

订阅专栏

css

2 篇文章

订阅专栏

本文介绍了如何使用CSS样式实现当文字内容超出两行时自动显示省略号的效果，特别适用于微信小程序的uniapp开发。通过特定的CSS样式，可以优雅地处理内容过长的显示问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<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;
}