css3 超出部分分两行

CSS3是现代网页设计必不可少的技术之一，通过使用CSS3，我们可以制作出更加美观、丰富的网页效果。本文中，我们将介绍如何使用CSS3实现超出部分分两行的效果。

在之前的网页设计中，如果出现了文字超出元素边界的情况，我们一般会通过添加滚动条或者隐藏超出的部分来解决。但是，这两种方法都不够优雅、美观，也不够灵活。现在，我们可以使用CSS3实现这种效果：

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

这段CSS代码中，我们使用了-webkit-box属性，将p元素变为一个弹性容器；使用-webkit-line-clamp属性，将容器的展示的行数设置为2行；最后，使用overflow属性对超出部分进行隐藏。

这样一来，当p元素中的文字超出边界时，它就会自动折成两行展示，且超出部分被隐藏，同时也不会出现滚动条，使得网页效果更加优美、简洁。

最后，需要注意的是，这个方法目前只兼容webkit内核的浏览器，如Chrome、Safari等。如果要实现跨浏览器的效果，可以考虑使用JS插件或者CSS Hack的方式，但是这样会增加代码的复杂度和不稳定性，需要权衡利弊后再决定使用。

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