CSS: 多行文本溢出隐藏（可自定义行数）

前言

多行文本溢出隐藏在前端是很常见的需求，例如文章的标题过长，需要超出两行后隐藏，显示省略号（…）。

解决方案

HTML:

这是文章的标题，它有点长。这是文章的标题，它有点长。这是文章的标题，它有点长。这是文章的标题，它有点长。这是文章的标题，它有点长。这是文章的标题，它有点长。这是文章的标题，它有点长。
 

CSS:

.title{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;flex-direction: column;
 }

效果图：

参考资料

-webkit-line-clamp：限制在一个块元素显示的文本的行数。 （了解更多）

嘘寒问暖 不如打笔巨款~