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

前言

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

解决方案

HTML:

<div class="title">
    这是文章的标题，它有点长。
	这是文章的标题，它有点长。
	这是文章的标题，它有点长。
	这是文章的标题，它有点长。
	这是文章的标题，它有点长。
	这是文章的标题，它有点长。
	这是文章的标题，它有点长。
</div>

CSS:

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

效果图：

参考资料

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

如果你有什么疑问或想法，欢迎留言评论，或者扫描下方二维码，与我取得联系~