基于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 相关文章推荐
web前端开发也需要日志
Dec 09 Javascript
jQuery的选择器中的通配符使用介绍
Mar 20 Javascript
js Object2String方便查看js对象内容
Nov 24 Javascript
jQuery中clone()方法用法实例
Jan 16 Javascript
Javascript基础教程之函数对象和属性
Jan 18 Javascript
JavaScript 性能优化小结
Oct 12 Javascript
深入解析JavaScript中的数字对象与字符串对象
Oct 21 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
Mar 10 Javascript
javascript self对象使用详解
Oct 18 Javascript
JavaScript实现多栏目切换效果
Dec 12 Javascript
小程序清理本地缓存的方法
Aug 17 Javascript
el-select 下拉框多选实现全选的实现
Aug 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
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
php长字符串定义方法
2012/07/12 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
js防止表单重复提交实现代码
2012/09/05 Javascript
javascript三元运算符用法实例
2015/04/16 Javascript
jQuery Validate验证框架详解(推荐)
2016/12/17 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
JavaScript提高加载和执行效率的方法
2017/02/03 Javascript
深入掌握 react的 setState的工作机制
2017/09/27 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
2018/11/25 Javascript
javascript实现简易计算器功能
2020/09/23 Javascript
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python matplotlib画图库学习绘制常用的图
2019/03/19 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
ubuntu 18.04 安装opencv3.4.5的教程(图解)
2019/11/04 Python
tensorflow:指定gpu 限制使用量百分比,设置最小使用量的实现
2020/02/06 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
Django中的AutoField字段使用
2020/05/18 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
美国婚戒购物网站:Anjays Designs
2017/06/28 全球购物
Big Green Smile法国:领先的英国有机和天然产品在线商店
2021/01/02 全球购物
小车司机岗位职责
2013/11/25 职场文书
搞笑获奖感言
2014/01/30 职场文书
四年级下册教学反思
2014/02/01 职场文书
中学生家长评语大全
2014/04/16 职场文书
2014年教师业务学习材料
2014/05/12 职场文书
2014教师教育实践活动对照检查材料思想汇报
2014/09/21 职场文书
小学英语教学反思范文
2016/02/15 职场文书
广播稿:校园广播稿范文
2019/04/17 职场文书
解决golang 关于全局变量的坑
2021/05/06 Golang
超级详细实用的pycharm常用快捷键
2021/05/12 Python
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技