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


Posted in Javascript onFebruary 29, 2016

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

具体代码如下所示:

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

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

Javascript 相关文章推荐
javascript GUID生成器实现代码
Oct 31 Javascript
JS上传前预览图片实例
Mar 25 Javascript
js实现简单登录功能的实例代码
Nov 09 Javascript
Egret引擎开发指南之视觉编程
Sep 03 Javascript
canvas实现粒子时钟效果
Feb 06 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
Sep 25 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
Oct 09 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
Mar 01 Javascript
node 解析图片二维码的内容代码实例
Sep 11 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
Sep 27 Javascript
vue插槽slot的简单理解与用法实例分析
Mar 14 Javascript
手把手教您实现react异步加载高阶组件
Apr 07 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
Feb 29 #Javascript
ClearTimeout消除闪动实例代码
Feb 29 #Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 #Javascript
jquery trigger函数执行两次的解决方法
Feb 29 #Javascript
理解js回收机制通俗易懂版
Feb 29 #Javascript
jquery trigger实现联动的方法
Feb 29 #Javascript
基于Javascript实现返回顶部按钮
Feb 29 #Javascript
You might like
最新的php 文件上传模型,支持多文件上传
2009/08/13 PHP
php中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
javascript hasFocus使用实例
2010/06/29 Javascript
基于JQuery的asp.net树实现代码
2010/11/30 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
node.js中的path.delimiter方法使用说明
2014/12/09 Javascript
Javascript 实现图片无缝滚动
2014/12/19 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
Angularjs的启动过程分析
2017/07/18 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
javascript数组去重方法总结(推荐)
2019/03/20 Javascript
python实现文件名批量替换和内容替换
2014/03/20 Python
利用Python进行异常值分析实例代码
2017/12/07 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
关于Python核心框架tornado的异步协程的2种方法详解
2019/08/28 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
Vs Code中8个好用的python 扩展插件
2020/10/12 Python
Pycharm安装python库的方法
2020/11/24 Python
Python实现Appium端口检测与释放的实现
2020/12/31 Python
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
德国低价购买灯具和家具网站:Style-home.de
2016/11/25 全球购物
iHerb台湾:维生素、保健品和健康产品
2018/01/31 全球购物
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
数学系毕业生的自我评价
2014/01/10 职场文书
冰淇淋店的创业计划书
2014/02/07 职场文书
事务机电主管工作职责
2014/02/25 职场文书
孩子教育的心得体会
2014/09/01 职场文书
缓刑人员思想汇报
2014/10/11 职场文书
老公婚前保证书
2015/02/28 职场文书
幼儿园小班班务总结
2015/08/03 职场文书
MATLAB 如何求取离散点的曲率最大值
2021/04/16 Python