文字第几行后用...代替

前言

有几次写前端代码的时候遇到了这种情况，就是后台传来的某个字段内容很长，页面上不能展示那么长的东西，一般一行或者两行字后就用一个…代替，相信很多人都见过，每次都要去找，挺麻烦的，在此记录一下。

一行+…

一行文字后加…需要写三行代码。如下所示。

overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;

两行+…

两行文字后加…需要写四行代码。如下所示。

display:-webkit-box;
overflow:hidden;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;

最后一行的数字表示需要第几行显示…就写几

结束语

只是用于记录小知识点，方便再次查看。
如需转载，请标明出处，谢谢。