css 多行超出显示省略号

在CSS中，我们可以使用文本溢出来控制文本行的显示效果。特别是在一些显示有限的场合，比如卡片、资讯等，多行文本的展示就显得非常重要。下面，我们就来介绍一种方法，可以在不改变 HTML 结构的情况下，实现CSS多行超出显示省略号。

.ellipsis{
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
}
    

以上代码中，“ellipsis”即为类名，可以根据实际需求自行设置。接下来，我们对每一行的属性进行说明。

• overflow: hidden; ：超出范围的文本被隐藏。
• display: -webkit-box; ：将对象作为弹性伸缩盒子模型显示。
• -webkit-line-clamp:3; ：限制在一个块元素显示的文本的行数。
• -webkit-box-orient: vertical; ：设置或检索伸缩盒对象的子元素的排列方式。
• text-overflow: ellipsis; ：当对象内文本溢出时显示省略标记。

通过上述方法设置后，我们可以让多余的文本超出显示，并自动省略后续文本内容。可以有效提升页面显示效果，同时对于一些描述较多的卡片、资讯、公告等场合，也更加方便实现。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！