本文給大家分享文字超出部分隱藏功能,代碼比較簡單,感興趣的朋友可以參考下本段代碼。
具體代碼如下所示:
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>文字超出限制字數后隱藏</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">奧斯卡金像獎之前,迪卡普里奧獲得本年度英國電影和電視藝術學院(BAFTA)最佳男主角獎。該獎項被認為是奧斯卡金像獎的前奏。盡管他曾經三次被提名參選,影迷們也一直為他鳴不平,但迪卡普里奧至今尚未獲得過奧斯卡獎。</div><div class="text text1">奧斯卡金像獎之前,迪卡普里奧獲得本年度英國電影和電視藝術學院(BAFTA)最佳男主角獎。該獎項被認為是奧斯卡金像獎的前奏。盡管他曾經三次被提名參選,影迷們也一直為他鳴不平,但迪卡普里奧至今尚未獲得過奧斯卡獎。但迪卡普里奧至今尚未獲得過奧斯卡獎。但迪卡普里奧至今尚未獲得過奧斯卡獎。</div><script>//根據class名稱獲取元素,此案例中之所以要用class獲取元素名稱,是為了可以控制多個元素( text,text1 )的字符串度.function getByClass(oParent, sClass) {if (oParent.getElementsByClassName) {return oParent.getElementsByClassName(sClass);} else { //IE 8 7 6var 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>
以上代碼簡單實現了文字超出部分隱藏的功能,希望大家喜歡。
新聞熱點
疑難解答