Css字体溢出显示省略号（实现单行多行显示省略号）

在 CSS 中，要实现单行文本的省略号显示

如果实现单行文本的溢出显示省略号，用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。

实现方法：

.text-container{
    
    
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

在 CSS 中，要实现多行文本的省略号显示

需要使用-webkit-line-clamp属性，该属性并不是CSS 规范中的属性，它是WebKit提供的一个扩展属性。利用该属性实现多行文本的省略号显示，需
要配合其他三个属性：
display: -webkit-box、 -webkit-box-orient、 text-overflow: ellipsis。
其中，
-webkit-line-clamp设置块元素包含的文本行数；
display: -webkit-box设置块元素的布局为伸缩布局；
-webkit-box-orient设置伸缩项的布局方向；
text-overflow: ellipsis则表示超出盒子的部分使用省略号表示。示例如下：

.text-container {
    
    
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;//2行展示，超出省略号
    text-overflow: ellipsis;
    overflow: hidden;
}

在上述代码中，文字容器会被限制在指定的宽度和高度范围内，并且超出范围的文字会被隐藏，超出行数的文字会被省略号代替。其中，-webkit-line-clamp: 2表示块元素中最多显示两行文本，可以根据自己的需求进行调整。

参考链接：https://blog.csdn.net/qq_36711388/article/details/82949793