[分享]css两行多出隐藏

CSS中的2行多出隐藏是很常用的技巧，特别是在网页设计中，当需要展示大段的文本内容，但是空间又有限时，就需要使用2行多出隐藏技巧来展示内容。那么，CSS中的2行多出隐藏是怎么实现的呢？ .multil...

CSS中的2行多出隐藏是很常用的技巧，特别是在网页设计中，当需要展示大段的文本内容，但是空间又有限时，就需要使用2行多出隐藏技巧来展示内容。

那么，CSS中的2行多出隐藏是怎么实现的呢？

 .multiline-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  } 

以上是一个典型的2行多出隐藏的CSS样式，其中：

• overflow: hidden; 表示超出的部分隐藏。
• text-overflow: ellipsis; 表示在被隐藏的部分显示省略符号。
• display: -webkit-box; 表示将元素作为弹性伸缩盒子模型显示。
• -webkit-box-orient: vertical; 表示弹性伸缩盒子模型的排列方式为垂直排列。
• -webkit-line-clamp: 2; 表示在弹性伸缩盒子模型中最多显示2行的内容。

通过以上样式设置，我们就可以轻松实现2行多出隐藏的效果，达到节约空间同时展示重要内容的目的。