佳木斯湛栽影视文化发展公司

主頁 > 知識庫 > HTML超出文本多行截取實現(xiàn)原理及代碼

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

熱門標簽:智能手機 阿里云 使用U盤裝系統(tǒng) 百度競價點擊價格的計算公式 美圖手機 硅谷的囚徒呼叫中心 網站建設 檢查注冊表項
HTML超出文本多行截取代碼如下:

HTML:

復制代碼
代碼如下:

<div class="sytm-text-1">
<p>
腳本之家 網址:https://www.jb51.net
</p>
</div>
<div class="sytm-text-2">
<p>
腳本之家 網址:https://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ù)的關鍵自然在div高度上了。

標簽:賀州 通遼 山南 湘潭 煙臺 懷化 湖北 黃山

巨人網絡通訊聲明:本文標題《HTML超出文本多行截取實現(xiàn)原理及代碼》,本文關鍵詞  ;如發(fā)現(xiàn)本文內容存在版權問題,煩請?zhí)峁┫嚓P信息告之我們,我們將及時溝通與處理。本站內容系統(tǒng)采集于網絡,涉及言論、版權與本站無關。
  • 相關文章
  • 收縮
    • 微信客服
    • 微信二維碼
    • 電話咨詢

    • 400-1100-266
    天峻县| 鹤庆县| 浦江县| 措美县| 元氏县| 广宗县| 巴青县| 沽源县| 满洲里市| 巴里| 临夏县| 嘉禾县| 高邑县| 高陵县| 余姚市| 定西市| 涿鹿县| 吉林市| 杭州市| 仙桃市| 离岛区| 苏尼特左旗| 新竹市| 金平| 宁强县| 革吉县| 陕西省| 华容县| 华安县| 阳泉市| 周至县| 鲁山县| 丹阳市| 克什克腾旗| 宜阳县| 宜君县| 依安县| 大冶市| 蓬安县| 大英县| 北流市|