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

前言

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

解决方案

HTML:

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

CSS:

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

效果图：

参考资料

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

 

嘘寒问暖 不如打笔巨款~