HTML:
代碼如下:
<div class="sytm-text-1">
<p>
腳本之家 網(wǎng)址:https://www.gxlcms.com
</p>
</div>
<div class="sytm-text-2">
<p>
腳本之家 網(wǎng)址:https://www.gxlcms.com
</p>
</div>
CSS:
代碼如下:
.sytm-text-1 {
color: #FFF;
background: #000;
width: 410px;
height: 22px;
}
.sytm-text-2 {
color: #FFF;
background: #000;
width: 410px;
height: 44px;
}
p {
line-height: 22px;
}
JS(引入jQuery):
代碼如下:
$("div[class*='sytm-text']").each(function(e){
var divHeight = $(this).height();
var $p = $("p", $(this)).eq(0);
while ($p.outerHeight() > divHeight) {
$p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
};
});
通過(guò)上述代碼可以發(fā)現(xiàn),實(shí)現(xiàn)這個(gè)效果的主要原理在于通過(guò)子容器(p)與父容器(div)高度的比較根據(jù)正則表達(dá)式進(jìn)行字符截取,直到兩者相等為止。所以控制截取行數(shù)的關(guān)鍵自然在div高度上了。
Copyright ? 2019- 91gzw.com 版權(quán)所有 湘ICP備2023023988號(hào)-2
違法及侵權(quán)請(qǐng)聯(lián)系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com
本站由北京市萬(wàn)商天勤律師事務(wù)所王興未律師提供法律服務(wù)