css中文字两行超出隐藏

CSS 有一种方法可以让文字两行超出之后隐藏，这个方法叫做“文本溢出截断”。

/*使用 ellipsis 属性，当文本溢出发生时，省略号省略剩余的文本*/
p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
} 

上面这段代码中，overflow 属性设置为 hidden，这样就可以让溢出的文本被隐藏而不是显示出来。text-overflow 属性设置为 ellipsis，这样当文本溢出发生时，剩余的文本将被省略为省略号。接着 display 属性被设置为 -webkit-box，-webkit-line-clamp 属性被设置为 2，-webkit-box-orient 属性被设置为 vertical，这三个属性的作用是让文本只显示两行且以竖直方向排列。

这种方法可以让文本在空间有限的情况下更好地显示，比如在网页的导航栏、卡片型布局等地方。