广州葆元健康生物科技有限公司


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

网络编程 基于JavaScript实现文字超出部分隐藏 06-22

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

具体代码如下所示:

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

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

JS创建对象几种不同方法详解
本文介绍了几种js创建对象的方法,分享给大家供大家参考,具体内容如下1、工厂模式弊端:没有解决对象的识别问题,即怎么知道一个对象的类型。2

原生javascript实现解析XML文档与字符串
之前写过一篇《使用jquery解析XML的方法》链接是http://www.gimoo.net/article/54842.htm,上篇文章详细解释了jQuery与字符串互相转换的方法,这里着重论述javascript

JavaScript Array对象详解
本文介绍了Js的Array数组对象,具体内容如下目录1.介绍:介绍Array数组对象的说明、定义方式以及属性。2.实例方法:介绍Array对象的实例方法:concat、ev


编辑:广州葆元健康生物科技有限公司

标签:奥斯卡奖,奥斯卡金像奖,对象,方法,迪卡普里奥