[分享]css3多行显示省略号

CSS3是一种用于为网页添加样式的技术，它可以让我们更加方便地对网页进行排版和美化。其中，多行显示省略号是一个比较常用的效果，可以让我们更好地进行页面排版，节省空间，提高页面阅读体验。/ 使用CSS3...

CSS3是一种用于为网页添加样式的技术，它可以让我们更加方便地对网页进行排版和美化。其中，多行显示省略号是一个比较常用的效果，可以让我们更好地进行页面排版，节省空间，提高页面阅读体验。

/* 使用CSS3进行多行显示省略号 */
.ellipsis {
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 使用省略号代替被隐藏部分 */
  display: -webkit-box; /* 基于webkit内核浏览器，使用flex模型 */
  -webkit-box-orient: vertical; /* 纵向排列 */
  -webkit-line-clamp: 3; /* 限制显示3行 */
} 

如上代码所示，在CSS3中，我们通过使用display属性改变文本元素的布局方式，使其能够按照我们的要求进行排列。其中，使用-webkit-box表示我们基于webkit内核浏览器的flex模型进行排列，并使用-webkit-box-orient控制其纵向排列。最后通过-webkit-line-clamp限制行数，使得最终的效果能够满足我们的需求。

实际使用中，我们可以将上述代码应用于需要进行多行省略的元素中，例如段落、列表等。这样就能够实现多行显示省略号的效果，让我们的页面更加整洁美观。