DDR爱好者之家

基于JavaScript实现文字超出部分隐藏
站长资源 2025/10/27 佚名
17 1538
DDR爱好者之家 Design By 杰米

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

具体代码如下所示：

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

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

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米