基于JavaScript实现文字超出部分隐藏
本文给大家分享文字超出部分隐藏功能,代码比较简单,感兴趣的朋友可以参考下本段代码。
具体代码如下所示:
<!DOCTYPEhtml>
<html>
<headlang="en">
<metacharset="UTF-8">
<title>文字超出限制字数后隐藏</title>
<style>
.text{
width:800px;
height:48px;
line-height:24px;
color:#333;
background:#ccc;
border:#eaeaea1pxsolid;
margin:40pxauto;
}
.text1{
width:500px;
height:72px;
}
</style>
</head>
<body>
<divclass="text">奥斯卡金像奖之前,迪卡普里奥获得本年度英国电影和电视艺术学院(BAFTA)最佳男主角奖。该奖项被认为是奥斯卡金像奖的前奏。尽管他曾经三次被提名参选,影迷们也一直为他鸣不平,但迪卡普里奥至今尚未获得过奥斯卡奖。</div>
<divclass="texttext1">奥斯卡金像奖之前,迪卡普里奥获得本年度英国电影和电视艺术学院(BAFTA)最佳男主角奖。该奖项被认为是奥斯卡金像奖的前奏。尽管他曾经三次被提名参选,影迷们也一直为他鸣不平,但迪卡普里奥至今尚未获得过奥斯卡奖。但迪卡普里奥至今尚未获得过奥斯卡奖。但迪卡普里奥至今尚未获得过奥斯卡奖。</div>
<script>
//根据class名称获取元素,此案例中之所以要用class获取元素名称,是为了可以控制多个元素(text,text1)的字符串度.
functiongetByClass(oParent,sClass){
if(oParent.getElementsByClassName){
returnoParent.getElementsByClassName(sClass);
}else{//IE876
vararr=[];
varreg=newRegExp('\\b'+sClass+'\\b');
varaEle=oParent.getElementsByTagName('*');
for(vari=0;i<aEle.length;i++){
if(reg.test(aEle[i].className)){
arr.push(aEle[i]);
}
}
returnarr;
}
}
functiontestAuto(){
vartextName=getByClass(document,'text');
for(vari=0;i<textName.length;i++){
varnowLeng=textName[i].innerHTML.length;
if(nowLeng>85){
varnowWord=textName[i].innerHTML.substr(0,85)+'······';
textName[i].innerHTML=nowWord;
}
}
}
testAuto();
</script>
</body>
</html>
以上代码简单实现了文字超出部分隐藏的功能,希望大家喜欢。