基于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 相关文章推荐
js调用flash的效果代码
Apr 26 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
Nov 25 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 Javascript
Node.js 的异步 IO 性能探讨
Oct 08 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
Jan 22 Javascript
js获取iframe中的window对象的实现方法
May 20 Javascript
BootStrap中Datepicker控件带中文的js文件
Aug 10 Javascript
vue模板语法-插值详解
Mar 06 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
Nov 21 Javascript
vue实现在线翻译功能
Sep 27 Javascript
Vue实现随机验证码功能
Dec 29 Vue.js
基于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与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
php-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
PHP中的reflection反射机制测试例子
2014/08/05 PHP
php计算指定目录下文件占用空间的方法
2015/03/13 PHP
document.open() 与 document.write()的区别
2007/08/13 Javascript
jquery复选框全选/取消示例
2013/12/30 Javascript
js文件Cookie存取值示例代码
2014/02/20 Javascript
Bootstrap被封装的弹层
2016/07/20 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
2017/02/22 Javascript
利用jQuery异步上传文件的插件用法详解
2017/07/19 jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
2018/02/24 jQuery
详解vue-cli脚手架中webpack配置方法
2018/08/22 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
python框架django基础指南
2016/09/08 Python
如何实现删除numpy.array中的行或列
2018/05/08 Python
django项目环境搭建及在虚拟机本地创建django项目的教程
2019/08/02 Python
Python上下文管理器全实例详解
2019/11/12 Python
Pandas时间序列:重采样及频率转换方式
2019/12/26 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
CSS3 3D制作实战案例分析
2016/09/18 HTML / CSS
文史专业毕业生自荐信
2013/11/17 职场文书
企业内控岗位的职责
2014/02/07 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书
圣诞节开幕词
2015/01/29 职场文书
我们的节日重阳节活动总结
2015/03/24 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
PHP判断是否是json字符串
2021/04/01 PHP
解析mybatis-plus中的resultMap简单使用
2021/11/23 Java/Android