[分享]css两行第二行截断

在 CSS 中，我们经常需要对文本进行格式化和美化。一种常见的需求是在某些情况下将文本截断为两行，并且第二行以省略号（...）结束。这个问题的解决方案可以使用 CSS 的 textoverflow 属...

在 CSS 中，我们经常需要对文本进行格式化和美化。一种常见的需求是在某些情况下将文本截断为两行，并且第二行以省略号（...）结束。这个问题的解决方案可以使用 CSS 的 text-overflow 属性。

/* 截断为两行，并以省略号结束 */
.two-lines {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 行数为两行 */
  -webkit-box-orient: vertical;
} 

如上，我们设置了容器的高度并隐藏其溢出部分。使用 text-overflow: ellipsis 属性，我们能够在第二行文本末尾添加省略号。其中的关键部分是使用 -webkit-box 和 -webkit-line-clamp 属性将文字限制在两行内。请注意，要使用这些 CSS 属性，你需要提供一个具有固定高度（例如，像素或 em）的容器。