CSS 超出的文字隐藏并显示省略号（单行、多行）

（如有错敬请指点，以下是我工作中遇到并且解决的问题）

如图



单行超出隐藏：

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

多行超出隐藏：（会有兼容性问题，使用的是-webkit-的属性，如：火狐浏览器不支持）

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* 2行 */
-webkit-box-orient: vertical;

另外：

除了以上的方法，还可以

1）使用css中 :after/::after 来实现"..."的效果，将高度height改为对应行数*对应的line-height，超出隐藏overflow: hidden;。不过还需要判断字符是否真的超出对应高度的内容，否则未超过仍会有...的效果

2）使用JavaScript来截取内容，将超出的内容替换为"..."