单行实现比较简单

white-space: nowrap;      /* 不换行 */
overflow: hidden;         /* 溢出隐藏 */
text-overflow: ellipsis;  /* 溢出显示省略号 */

重点说的是多行

看到-webkit-就知道了，多行省略号一般用在移动端

/*
 *  必须指定 display: -webkit-box;
 *  对象作为弹性伸缩盒子模型显示
 */
display: -webkit-box;

overflow: hidden;

/*
 *  -webkit-line-clamp: 4;
 *  相信大家对这个属性有点陌生，因为这是一个不规范的属性
 *  限制在一个块元素显示的文本的行数
 */
-webkit-line-clamp: 4;

/*
 *  设置或检索伸缩盒对象的子元素的排列方式
 */
-webkit-box-orient: vertical;

多行文本溢出省略号还是挺管用的，不知道怎么就其他浏览器就不支持了呢

点击在线预览