[分享]css3控制文字显示两行

CSS3是一种流行的网页设计语言，可以用来美化网页中的各种元素，其中包括控制文字显示的方式。当我们想要让文字在一个固定的区域内显示两行时，可以使用CSS3来实现。以下是代码示例： p { displa...

CSS3是一种流行的网页设计语言，可以用来美化网页中的各种元素，其中包括控制文字显示的方式。当我们想要让文字在一个固定的区域内显示两行时，可以使用CSS3来实现。以下是代码示例：

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

其中，display: -webkit-box;表示使用基于flexbox的布局，-webkit-line-clamp: 2;表示限制显示2行，-webkit-box-orient: vertical;表示垂直方向排布，overflow: hidden;表示超出部分隐藏，text-overflow: ellipsis;表示超出部分省略号显示。

通过这些简单的代码，我们可以轻松地实现文字在一个固定的区域内显示两行，增强网页的美观程度。