如何使用CSS实现文本溢出省略号？

本篇文章向大家介绍《如何使用CSS实现文本溢出省略号？ 》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

CSS如何让溢出内容以"..."结尾？

对于有多余文本希望用"..."截断的情况，CSS提供了多种解决方案。

1. 单行省略号

可以通过设置元素的 overflow: hidden;, white-space: nowrap;, 和 text-overflow: ellipsis; 属性来实现单行省略号：

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

2. 多行省略号

对于多行文本，可以使用 display:-webkit-box, -webkit-box-orient:vertical, -webkit-line-clamp:2, overflow: hidden;, 和 text-overflow: ellipsis; 属性：

.content {
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2; /*设置超过为省略号的行数*/
    overflow: hidden;
    text-overflow: ellipsis;
}

使用此设置时，需要指定 -webkit-line-clamp 属性以设置要在不添加省略号的情况下显示的行数。

理论要掌握，实操不能落！以上关于《如何使用CSS实现文本溢出省略号？ 》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！