本文給大家分享文字超出部分隱藏功能，代碼比較簡(jiǎn)單，感興趣的朋友可以參考下本段代碼。
具體代碼如下所示：
代碼如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>文字超出限制字?jǐn)?shù)后隱藏</title>
<style>
.text {
width: 800px;
height: 48px;
line-height: 24px;
color: #333;
background: #ccc;
border: #eaeaea 1px solid;
margin: 40px auto;
}
.text1{
width: 500px;
height: 72px;
}
</style>
</head>
<body>
<div class="text">奧斯卡金像獎(jiǎng)之前，迪卡普里奧獲得本年度英國(guó)電影和電視藝術(shù)學(xué)院（BAFTA）最佳男主角獎(jiǎng)。該獎(jiǎng)項(xiàng)被認(rèn)為是奧斯卡金像獎(jiǎng)的前奏。盡管他曾經(jīng)三次被提名參選，影迷們也一直為他鳴不平，但迪卡普里奧至今尚未獲得過(guò)奧斯卡獎(jiǎng)。</div>
<div class="text text1">奧斯卡金像獎(jiǎng)之前，迪卡普里奧獲得本年度英國(guó)電影和電視藝術(shù)學(xué)院（BAFTA）最佳男主角獎(jiǎng)。該獎(jiǎng)項(xiàng)被認(rèn)為是奧斯卡金像獎(jiǎng)的前奏。盡管他曾經(jīng)三次被提名參選，影迷們也一直為他鳴不平，但迪卡普里奧至今尚未獲得過(guò)奧斯卡獎(jiǎng)。但迪卡普里奧至今尚未獲得過(guò)奧斯卡獎(jiǎng)。但迪卡普里奧至今尚未獲得過(guò)奧斯卡獎(jiǎng)。</div>
<script>
//根據(jù)class名稱獲取元素,此案例中之所以要用class獲取元素名稱,是為了可以控制多個(gè)元素( text,text1 )的字符串度.
function getByClass(oParent, sClass) {
if (oParent.getElementsByClassName) {
return oParent.getElementsByClassName(sClass);
} else { //IE 8 7 6
var arr = [];
var reg = new RegExp('\\b' + sClass + '\\b');
var aEle = oParent.getElementsByTagName('*');
for (var i = 0; i < aEle.length; i++) {
if (reg.test(aEle[i].className)) {
arr.push(aEle[i]);
}
}
return arr;
}
}
function testAuto() {
var textName = getByClass(document, 'text');
for (var i = 0; i < textName.length; i++) {
var nowLeng = textName[i].innerHTML.length;
if ( nowLeng > 85 ) {
var nowWord = textName[i].innerHTML.substr(0, 85) + '······';
textName[i].innerHTML = nowWord;
}
}
}
testAuto();
</script>
</body>
</html>
以上代碼簡(jiǎn)單實(shí)現(xiàn)了文字超出部分隱藏的功能，希望能幫到你。
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試