重点:text-overflow: ellipsis;只对display:inline;起作用
如果实现单行文本的溢出显示省略号同学们应该都知道用 text-overflow:ellipsis 属性来,当然还需要加 【宽度width】 属来兼容部分浏览。
一行显示
white-space: nowrap;text-overflow: ellipsis;overflow: hidden;word-break: break-all;
两行显示
text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;
三行显示
overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;