单行文本和多行文本溢出省略号实现

一、单行文本

white-space: nowrap; /* 使文本溢出不换行*/

overflow: hidden; /* 溢出部分砍断隐藏 */

text-overflow: ellipsis; /* 溢出部分打点展示*/

显示效果如图:

二、多行文本省略号

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

overflow: hidden;