项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有,利用html新增属性可以控制网页中单行或者多行显示,达到文字长度控制,防止多文字对样式的影响!
单行:(方法一)
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
单行:(方法二)
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
多行:
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; //控制行数
-webkit-box-orient: vertical;