多行文本溢出显示省略号兼容写法

1.如果只考虑webkit内核浏览器

.mult_line_ellipsis{

 overflow: hidden;

text-overflow:ellipsis;

 display: -webkit-box;

-webkit-line-clamp: 3;

-webkit-box-orient: vertical;

2.兼容火狐和谷歌

.imitate_ellipsis{

position:relative;

line-height:1.4em;

height:2.8em;

overflow:hidden;

 }

.imitate_ellipsis::after{

content:"...";

position:absolute;

3.兼容ie

.imitate_ellipsis{

position:relative;

line-height:1.4em;

height:2.8em;

overflow:hidden;

 }

.imitate_ellipsis:after{

content:"...";

position:absolute;

posted @ 2018-09-27 17:10  双桨lovening  阅读(1719)  评论(0编辑  收藏  举报