JavaScript实现隐藏省略文字效果的方法


Posted in Javascript onApril 27, 2017

本文实例讲述了JavaScript实现隐藏省略文字效果的方法。分享给大家供大家参考,具体如下:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
    <title>JS</title>
  </head>
<body>
  <div id="content">有一种心态叫放下;有一种境界叫舍得;有一种幸福叫守候;有一种智慧叫低调;有一种选择叫放弃;有一种明白叫糊涂;有一种心态叫包容;有一种快乐叫简单;有一种美德叫微笑;有一种幸福叫珍惜;有一种美丽叫自信;有一种感动叫分享;有一种真情叫关爱;有一种温暖叫感恩;有一种成功叫坚持。
  </div>
<script language="javascript">
  (function(){
    var len = 50; // 默认显示的字数
    var content = document.getElementById("content"); // content 获取内容 div 对象
    var text = content.innerHTML;  // text 为内容
    var span = document.createElement("span"); // 创建一个 SPAN 标签
    var n = document.createElement("a");  // 创建一个 A 标签
    span.innerHTML = text.substring(0,len); // SPAN 标签的内容为 text 的前 len 个字符
    n.innerHTML = text.length > len ? "..展开" : ""; // 创建的 A 标签内容,如果内容字数大于 len,那么为“..展开”,否则为空
    n.href = "javascript:void(0)"; // 设置 A 标签的链接地址(随意)
    n.onclick = function(){ // 点击 A 链接执行下面函数
    // 如果 A 标签的内容为“..展开”,那么 A 标签内容变成“收起”,SPAN 标签的内容为 DIV 全部内容,否则内容为前 len 个字符
    if (n.innerHTML == "..展开"){
      n.innerHTML = "收起";
      span.innerHTML = text;
    }else{
      n.innerHTML = "..展开";
      span.innerHTML = text.substring(0,len);
    }
   }
    content.innerHTML = "";   // 设置 DIV 内容为空
    content.appendChild(span); // 把 SPAN 元素加到 DIV 中
    content.appendChild(n);   // 把 A 元素加到 DIV 中
  })();
</script>
</body>
</html>

效果图:

JavaScript实现隐藏省略文字效果的方法

JavaScript实现隐藏省略文字效果的方法

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript 判断字符串是否包含某字符串及indexOf使用示例
Oct 18 Javascript
函数式 JavaScript(一)简介
Jul 07 Javascript
JS获取下拉框显示值和判断单选按钮的方法
Jul 09 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
Dec 18 Javascript
AngularJS 过滤器(自带和自建)详解
Sep 19 Javascript
jQuery中map函数的两种方式
Apr 07 jQuery
Node调用Java的示例代码
Sep 20 Javascript
js+html5 canvas实现ps钢笔抠图
Apr 28 Javascript
vue+element-ui+axios实现图片上传
Aug 20 Javascript
JS一次前端面试经历记录
Mar 19 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 Javascript
Vue自定义图片懒加载指令v-lazyload详解
Dec 31 #Javascript
JavaScript实现反转字符串的方法详解
Apr 27 #Javascript
jquery 禁止鼠标右键并监听右键事件
Apr 27 #jQuery
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 #jQuery
js实现添加删除表格(两种方法)
Apr 27 #Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 #jQuery
vue2 前后端分离项目ajax跨域session问题解决方法
Apr 27 #Javascript
You might like
php批量删除数据
2007/01/18 PHP
php addslashes 函数详细分析说明
2009/06/23 PHP
使用php验证复选框有效性的示例
2013/11/13 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(七)
2014/06/23 PHP
PHP socket 模拟POST 请求实例代码
2016/07/18 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
PHP实现的自定义图像居中裁剪函数示例【测试可用】
2017/08/11 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
用cookies实现的可记忆的样式切换效果代码下载
2007/12/24 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
2013/12/26 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
2014/01/07 Javascript
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
2015/08/22 Javascript
Angular 应用技巧总结
2016/09/14 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
微信小程序之前台循环数据绑定
2017/08/18 Javascript
在Python中操作列表之list.extend()方法的使用
2015/05/20 Python
使用Python下载歌词并嵌入歌曲文件中的实现代码
2015/11/13 Python
python基础_文件操作实现全文或单行替换的方法
2017/09/04 Python
Python实现的调用C语言函数功能简单实例
2019/03/13 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
python GUI库图形界面开发之PyQt5布局控件QVBoxLayout详细使用方法与实例
2020/03/06 Python
Python __slots__的使用方法
2020/11/15 Python
建筑经济管理专业求职信分享
2014/01/06 职场文书
大学生社会实践评语
2014/04/25 职场文书
医院信息公开实施方案
2014/05/09 职场文书
党员领导干部承诺书
2014/05/28 职场文书
法学专业毕业生自荐信
2014/06/11 职场文书
优秀教师先进个人事迹材料
2014/08/31 职场文书
平遥古城导游词
2015/02/03 职场文书
车间统计员岗位职责
2015/04/14 职场文书
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python
设置IIS Express并发数
2022/07/07 Servers
JS高级程序设计之class继承重点详解
2022/07/07 Javascript