css多出两行隐藏

在CSS中，有一种非常有用的技巧，叫做多出两行隐藏。什么是多出两行隐藏呢？就是在某个元素的底部隐藏两行内容，而可见部分只有元素的上面几行。

使用这种技巧可以让页面更加美观，也可以给用户留下更多的想象空间。

.example {
    overflow: hidden;
    display: -webkit-Box;
    -webkit-line-clamp: 3;
    -webkit-Box-orient: vertical;
}

.example::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 20px;
    background-image: linear-gradient(to bottom,rgba(255,255,0),1));
}

上面是实现多出两行隐藏的主要代码。其中，overflow: hidden;用来隐藏超出元素高度的内容，display: -webkit-Box;将元素转换为弹性盒子，-webkit-line-clamp: 3;表示最多显示三行，-webkit-Box-orient: vertical;表示垂直排列。

再看一下.example::after，这是个伪元素，用来添加一个渐变透明的遮罩。它的width应该与元素的宽度一致，height可以根据需求进行调整。

使用多出两行隐藏技巧可以让页面效果更加出色，同时也能提高用户体验。不过，需要注意的是，这种技巧只适用于单行文本，如果要对多行文本进行隐藏，需要使用其他方法。