css实现文本超出两行隐藏

最新推荐文章于 2025-05-13 17:37:39 发布

weixin_33766805

最新推荐文章于 2025-05-13 17:37:39 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lvxisha/p/10773348.html

本文介绍了一种使用CSS属性来实现当文字显示超出两行时，多余部分自动隐藏的效果，适用于网页布局中对文本长度有限制的场景。

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

当文字显示超出两行时，多余部分文字隐藏，用到的css属性如下代码

    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;//当属性值为3，表示超出3行隐藏

demo

.xsConInfo{
			float: left;
			width: 100%;
			line-height: 25px!important;
			display: -webkit-box;
			text-overflow: ellipsis;
			overflow: hidden;
			-webkit-box-orient:vertical;
			-webkit-line-clamp:2;
}

　效果如下：：