字体超过2行文字变为省略号

.text{

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

}

 

1. display: -webkit-box;

   • 这是一个旧版的 CSS 属性，用于设置布局方式。在这里，它被用来将元素作为一个弹性盒子来显示。 -webkit-box 是针对旧版 WebKit 浏览器的属性，现代浏览器一般使用 display: flex; 来实现相同的效果。

2. -webkit-line-clamp: 2;

   • 这个属性用于控制在一个块容器显示的文本的行数。在这里设置为 2，文本内容应该显示在指定的行数内（2）

3. -webkit-box-orient: vertical;

   • 这个属性用于指定盒子的子元素的排列方式。在这里，它将子元素以垂直方向进行排列。

4. overflow: hidden;

   • 这是用来控制当内容溢出容器时的表现方式。设置为 hidden 表示溢出的内容将被隐藏。

5. text-overflow: ellipsis;

   • 这个属性用于控制溢出文本的显示方式。ellipsis 表示当文本溢出时，以省略号 (...) 表示被修剪的文本部分。