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

  • 单行文字溢出隐藏
  • 多行文字溢出隐藏

单行文字溢出隐藏

1
2
3
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

多行文字溢出隐藏

1
2
3
4
5
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3; //文本超出三行后隐藏