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

标签：pos   lamp   spl   over   兼容   1.4   display   文本   bsp   

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;

} 

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

标签：pos   lamp   spl   over   兼容   1.4   display   文本   bsp   

原文地址：https://www.cnblogs.com/shuangjiang/p/9714258.html