多行文本溢出显示省略号(...)的方法(兼容ie8)

2019-01-25  本文已影响0人  YC木木_39a8

html:

<div class="figcaption"><p>作为微软的游戏平台,Xbox已经出现在了Windows Phone和Windows 8中,就在最近,微软宣布将旗下的Zune消费品牌也一并整合至Xbox品牌下,Xbox Live服务影响力越来越大,渗透面也越来越广。</p></div>

css:

.figcaption {

    background: #EEE;

    width: 410px;

    height: 3em;

    margin: 1em;

}

.figcaption p {

    margin: 0;

    line-height: 1.5em;

}

除了各个浏览器私有的属性,有没有跨浏览器的解决方法呢?当然是通过js实现啦!(通过从后向前逐个删除末尾字符,直至元素的高度小于父元素高度)

$(".figcaption").each(function(i){vardivH=$(this).height();var$p=$("p",$(this)).eq(0);while($p.outerHeight()>divH){$p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/,"..."));};});

上一篇下一篇

猜你喜欢

热点阅读