浅谈CSS文本超出(溢出)隐藏显示省略号

项目中常常有这种需要我们对溢出文本进行"..."显示的操作，单行多行的情况都有（具体几行得看设计师心情了），这篇随笔是我个人对这种情况解决办法的归纳，欢迎各路英雄指教。

超出一行隐藏:

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

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

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

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

超出两行隐藏:

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; 

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知