基于JavaScript实现文字超出部分隐藏
更新时间：2016年02月29日 17:01:34 作者：种花家的小白兔
这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下
本文给大家分享文字超出部分隐藏功能，代码比较简单，感兴趣的朋友可以参考下本段代码。
具体代码如下所示：
<!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>
以上代码简单实现了文字超出部分隐藏的功能，希望大家喜欢。
相关文章
layui radio点击事件实现input显示和隐藏的例子
今天小编就为大家分享一篇layui radio点击事件实现input显示和隐藏的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
轮播效果是老生常谈的话题，今天小编通过实例代码给大家分享原生JS实现简单的无缝自动轮播效果，感兴趣的朋友跟随小编一起学习吧2018-09-09
工作中做了几款自动化测试工具都是跟日志读取相关，日志格式又大多数都是JSON，所以这里把常用的JS操作JSON的方法做了总结2017-04-04
这篇文章主要为大家详细介绍了微信小程序实现购物车选择规格颜色选中效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
这篇文章主要介绍了JavaScript实现简单的tab选项卡切换的相关资料,需要的朋友可以参考下2016-01-01
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
这篇文章主要介绍了关于微信小程序获取小程序码并接受buffer流保存为图片的方法，文中通过示例代码介绍的非常详细，对大家学习或者使用小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧<BR>2019-06-06
仅IE支持clearAttributes/mergeAttributes方法使用介绍
仅IE中HTMLElement元素具有clearAttributes/mergeAttributes方法，它们都是非标准的2012-05-05
这篇文章主要为大家详细介绍了微信小程序自定义导航栏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
这篇文章主要介绍了JavaScript 管道运算符,管道运算符为我们的代码添加了大量上下文，并简化了操作，以便以后可以扩展它们，本文结合示例代码给大家介绍的非常详细，需要的朋友可以参考下2023-05-05
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
前支持javascript调试功能的工具越来越多，主要分为ie和firefox两大阵营。其他浏览器上很难调试javascript。而Javascript Debug Toolkit解决了这个问题，可能在所有支持ajax请求的浏览器上调试javascript.2008-12-12
最新评论