HTML超出文本多行截取實現(xiàn)原理及代碼

    本文為大家介紹下HTML超出文本多行如何截取其實原理很簡單通過子容器（p）與父容器（div）高度的比較根據(jù)正則表達式進行字符截取，直到兩者相等為止
    HTML超出文本多行截取代碼如下：
    HTML：
    代碼如下:
    <div>
    <p>
    網(wǎng)址：http://www.jb51.net
    </p>
    </div>
    <div>
    <p>
    網(wǎng)址：http://www.jb51.net
    </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)(\.\.\.)?$/, "..."));
    };
    });
    通過上述代碼可以發(fā)現(xiàn)，實現(xiàn)這個效果的主要原理在于通過子容器（p）與父容器（div）高度的比較根據(jù)正則表達式進行字符截取，直到兩者相等為止。所以控制截取行數(shù)的關(guān)鍵自然在div高度上了。