基于JavaScript实现文字超出部分隐藏

时间：2021-05-25

本文给大家分享文字超出部分隐藏功能，代码比较简单，感兴趣的朋友可以参考下本段代码。

具体代码如下所示：

<!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>

以上代码简单实现了文字超出部分隐藏的功能，希望大家喜欢。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章