css 2行显示省略号 |vscode css 补全

.text {
width: 200px;
white-space: pre-line; /*允许换行*/
overflow: hidden;
text-overflow: ellipsis; /*省略号*/
display: -webkit-box;
-webkit-box-orient: vertical; /*行向垂直排列*/
-webkit-line-clamp: 2; /*限制2行*/
}

其中，-webkit-box和-webkit-box-orient属性用于使文本纵向排列，-webkit-line-clamp属性用于限制文本行数。

需要注意的是，text-overflow属性只在一行文本中显示省略号时受支持。在多行文本中，可以使用display属性的-webkit-box值使文本在垂直方向上排列，然后限制行数来显示省略号。