CSS文字超过2行就掩藏而且显示信息省略号

日期:2021-03-17 类型:科技新闻 

关键词:制作小程序,小程序商城,扫码点餐小程序,微信小程序开店的步骤,牛刀小程序

 超过1行掩藏:

overflow:hidden; //超过的文字掩藏

text-overflow:ellipsis; //外溢用省略号显示信息

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

可是第3条特性,只能显示信息1行,不可以用在这里,那末假如显示信息多行呢?

超过两行掩藏:

css3处理了这个难题,处理方式以下:

display:-webkit-box; //将目标做为延展性伸缩盒子实体模型显示信息。

-webkit-box-orient:vertical; //从上到下竖直排序子元素(设定伸缩盒子的子元素排序方法)

-webkit-line-clamp:2; //这个特性并不是css的标准特性,必须组成上面两个特性,表明显示信息的行数。 

因此,最终的結果:

overflow:hidden;

text-overflow:ellipsis;

display:-webkit-box;

-webkit-box-orient:vertical;

-webkit-line-clamp:2; 
 

总结

以上所述是网编给大伙儿详细介绍的CSS文字超过2行就掩藏而且显示信息省略号,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!