一行省略，两行省略

一行省略
1、得是以配置为inline-block的元素，或默认以block呈现的div、p元素
2、强制不换行
3、固定宽度
4、超出部分隐藏
5、超出部分以’…'结尾

width: 140px;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

两行省略

width:140px;
height:140px;
overflow: hidden;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
-webkit-box-pack: center;//设置高度后只有一行时上下居中

display：inline-block引起的错位问题是因为，display：inline-block是基于baseline对齐的，大小不一会导致上下不齐，所以设置的时候最好设置vertical-align属性。vertical-align: top;