英特网校

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;


评论中心

登录后可评论,请 登录 注册