html>

Page?Title

.wrap?{

height:?40px;

line-height:?20px;

overflow:?hidden;

}

.wrap?.text?{

float:?right;

margin-left:?-5px;

width:?100%;

word-break:?break-all;

}

.wrap::before?{

float:?left;

width:?5px;

content:?‘‘;

height:?40px;

}

.text?{

position:?relative;

line-height:?18px;

height:?36px;

overflow:?hidden;

}

.text::after?{

content:"...";

font-weight:bold;

position:absolute;

bottom:0;

right:0;

padding:0?20px?1px?45px;

/*?為了展示效果更好?*/

background:?-webkit-gradient(linear,?left?top,?right?top,?from(rgba(255,?255,?255,?0)),?to(white),?color-stop(50%,?white));

background:?-moz-linear-gradient(to?right,?rgba(255,?255,?255,?0),?white?50%,?white);

background:?-o-linear-gradient(to?right,?rgba(255,?255,?255,?0),?white?50%,?white);

background:?-ms-linear-gradient(to?right,?rgba(255,?255,?255,?0),?white?50%,?white);

background:?linear-gradient(to?right,?rgba(255,?255,?255,?0),?white?50%,?white);

}

he?yellow?region?as?the?ellipsis.?Then?you?may?think?that?the?pink?box?takes?up?space,?but?will?the?title?be?delayed?as?a?whole??Here?you?can?come?out?by?the?negative?value?of?margin.?Set?the?negative?value?of?the?pale?blue?box?to?be?the?same?width?as?the?pink?box,?and?the?title?can?also?be?displayed?normally.

總結(jié)

以上是生活随笔為你收集整理的css多行省略号兼容ie,css超出2行部分省略号……，兼容ie的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。