CSS设置文本超出隐藏，并显示省略号

CSS设置文本超出隐藏，并显示省略号可以使用overflow:hidden将超出部分隐藏，然后使用text-overflow:ellipsis设置文本对象溢出是显示为省略号。下面是可以直接使用的样式代码分享，分别提供了超出一行和多行的样式代码示例：

样式代码：

可以直接使用，给需要设置超出隐藏的文本或者标题直接添加上如下样式即可。

超出一行，隐藏文本并显示省略号

//超出一行省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

超出两行甚至多行，隐藏文本并显示省略号

//超出2行隐藏显示省略号示例
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
//假设是需要超出三行隐藏，则修改-webkit-line-clamp和line-clamp属性对应的值，将上述的2修改为3。

相关文章

网上还有一些更加详细的相关介绍文章，感兴趣的可以自己看看：

CSS -webkit-box-orient: vertical 属性编译后丢失问题详解_继续向前~的博客-CSDN博客

ss控制文本两行显示-超出省略号表示-CSDN博客