基于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 相关文章推荐
基于jquery的一个简单的脚本验证插件
Apr 05 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
Jan 25 Javascript
AngularJS Bootstrap详细介绍及实例代码
Jul 28 Javascript
Angular ng-class详解及实例代码
Sep 19 Javascript
AngularJS 文件上传控件 ng-file-upload详解
Jan 13 Javascript
学好js,这些js函数概念一定要知道【推荐】
Jan 19 Javascript
如何在Angular2中使用jQuery及其插件的方法
Feb 09 Javascript
axios学习教程全攻略
Mar 26 Javascript
使用jQuery实现购物车结算功能
Aug 15 jQuery
JS使用数组实现的队列功能示例
Mar 04 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
May 07 Javascript
layer父页获取弹出层输入框里面的值方法
Sep 02 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
星际争霸 Starcraft 游戏介绍
2020/03/14 星际争霸
ExtJS与PHP、MySQL实现存储的方法
2010/04/02 PHP
探讨fckeditor在Php中的配置详解
2013/06/08 PHP
PHP rmdir()函数的用法总结
2019/07/02 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
JavaScript URL参数读取改进版
2009/01/16 Javascript
测试你的JS的掌握程度的代码
2009/12/09 Javascript
Javascript延迟执行实现方法(setTimeout)
2010/12/30 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
2013/05/27 Javascript
JQuery判断子iframe何时加载完成解决方案
2013/08/20 Javascript
jqplot通过ajax动态画折线图的方法及思路
2013/12/08 Javascript
通过location.replace禁止浏览器后退防止重复提交
2014/09/04 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
2016/05/16 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
javascript高级模块化require.js的具体使用方法
2017/10/31 Javascript
Javascript获取某个月的天数
2018/05/30 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
2018/09/18 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
详解vue.js移动端配置flexible.js及注意事项
2019/04/10 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
Pandas 合并多个Dataframe(merge,concat)的方法
2018/06/08 Python
keras .h5转移动端的.tflite文件实现方式
2020/05/25 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
前台文员我鉴定
2014/01/12 职场文书
小区消防演习方案
2014/02/21 职场文书
公司业务员岗位职责
2014/03/18 职场文书
工伤赔偿协议书
2014/04/15 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
关于十八大的演讲稿
2014/09/15 职场文书
就业推荐表自我评价范文
2015/03/02 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
新手入门Jvm-- JVM对象创建与内存分配机制
2021/06/18 Java/Android
MySQL系列之十一 日志记录
2021/07/02 MySQL
windows server2008 开启端口的实现方法
2022/06/25 Servers