1. 程式人生 > >多行文本溢出顯示省略號兼容寫法

多行文本溢出顯示省略號兼容寫法

splay posit over overflow 省略號 lips nbsp dde 顯示

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;

}

多行文本溢出顯示省略號兼容寫法