[分享]css3文字显示两行

CSS3提供了很多新的特性来控制文字的显示效果。其中一项特性就是显示两行的文本。下面我们通过代码来进行演示。 / 对p标签进行样式设置 / p { width: 200px; / 宽度为200像素 /...

CSS3提供了很多新的特性来控制文字的显示效果。其中一项特性就是显示两行的文本。下面我们通过代码来进行演示。

 /* 对p标签进行样式设置 */
p {
  width: 200px; /* 宽度为200像素 */
  height: 32px; /* 高度为32像素 */
  line-height: 16px; /* 行高为16像素 */
  overflow: hidden; /* 超出部分隐藏 */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 表示最多显示2行 */
  -webkit-box-orient: vertical; /* 竖直排列 */
} 

上述代码中，我们首先对p标签进行样式设置。设置了宽度、高度和行高，并把超出部分进行隐藏。然后使用了CSS3中的flex布局，将p标签设置为弹性盒模型。

最后，使用了Webkit引擎的-webkit-box-orient属性来设置文本垂直排列，并使用了-webkit-line-clamp属性来表明最多只显示2行文字。当文字超过2行时，超出的部分就会被隐藏。

通过以上样式设置，我们就实现了使用CSS3来显示两行文本的效果。这样的文字显示方式不仅美观，而且非常适合在网页中使用。