css 文本超出2行就隐藏并且显示省略号

本文介绍了如何使用CSS来实现多行文本超出部分以省略号显示。核心在于利用`-webkit-line-clamp`属性,但需要注意它不是标准CSS属性。结合`display:-webkit-box`和`-webkit-box-orient:vertical`,可以在div元素内实现多行文本的省略号效果。这种方法对于需要限制文本显示长度的场景非常实用。

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

首先,要知道css的三条属性。

 overflow:hidden; //超出的文本隐藏 

 text-overflow:ellipsis; //溢出用省略号显示

 white-space:nowrap; //溢出不换行 

 这三个是css的基础属性,需要记得。 

但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢? 

--------------------------------------------------------------------------------

 css3解决了这个问题,解决方法如下:(只能用在div标签内,p标签失效)

 display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。

 -webkit-box-orient:vertical; //从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式) 

 -webkit-line-clamp:2; //这个属性不是css的规范属性,需要组合上面两个属性,表示显示的行数。

-------------------------------------------------------------------------------------

 最后的css样式如下:

 overflow:hidden;

 text-overflow:ellipsis; 

 display:-webkit-box;

 -webkit-box-orient:vertical;

 -webkit-line-clamp:2;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值