CSS文本溢出显示省略号

admin 发布于 CSS

项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有,利用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;


681浏览量 · 0评论 · 2018-11-05 11:32:49

全部评论  0

注册登录 进行评论

热门专题

更多专题