css文本2行溢出

在 CSS 样式表中，可以通过 text-overflow 属性来控制文本溢出时的显示效果。当一行文本过长时，可以使用该属性让它以省略号的形式隐藏起来，或者在溢出处添加滚动条。但如果我们希望让文本以两行的形式显示，该怎么办呢？

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

通过使用上述 CSS 样式，可以让文本在溢出时以两行的形式显示，并将多出的部分隐藏。这是因为 -webkit-box 是 CSS3 引入的一个特性，它可以创建一个弹性容器，并且可以通过 -webkit-box-orient 属性来设置该容器的方向，这里设置为垂直方向。同时，-webkit-line-clamp 属性控制了容器中文本的行数，这里设置为 2，表示最多显示两行。最后，通过 overflow 属性来控制溢出部分的隐藏方式，这里使用了 hidden 属性，表示将多余部分隐藏起来。

需要注意的是，-webkit-box 属性目前只在 WebKit 内核的浏览器中有效，不过还有一种解决方案是使用 display: flex，这是 CSS3 引入的另一个弹性布局特性，它可以实现类似的效果。总之，如果需要让文本以两行的形式显示，可以尝试使用上述 CSS 样式来实现。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！