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 相关文章推荐
读jQuery之一(对象的组成)
Jun 11 Javascript
用C/C++来实现 Node.js 的模块(一)
Sep 24 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
Jan 18 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
Mar 11 Javascript
遍历json 对象的属性并且动态添加属性的实现
Dec 02 Javascript
vue2.0实现导航菜单切换效果
May 08 Javascript
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
webpack4实现不同的导出类型
Apr 09 Javascript
微信小程序系列之自定义顶部导航功能
May 21 Javascript
详解如何提升JSON.stringify()的性能
Jun 12 Javascript
微信小程序从注册账号到上架(图文详解)
Jul 17 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
Nov 03 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 来访国内外IP判断代码并实现页面跳转
2009/12/18 PHP
php后台如何避免用户直接进入方法实例
2013/10/15 PHP
php将远程图片保存到本地服务器的实现代码
2015/08/03 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
javascript 表单规则集合对象
2009/07/21 Javascript
JavaScript Timer实现代码
2010/02/17 Javascript
append和appendTo的区别以及appendChild用法
2013/12/24 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
浅谈JavaScript 的执行顺序
2015/08/07 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
Vue.js中兄弟组件之间互相传值实例
2017/06/01 Javascript
深入浅析javascript函数中with
2018/10/28 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
Vue使用axios出现options请求方法
2019/05/30 Javascript
vue前后分离调起微信支付
2019/07/29 Javascript
三剑客:offset、client和scroll还傻傻分不清?
2020/12/04 Javascript
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
pandas.loc 选取指定列进行操作的实例
2018/05/18 Python
python的pandas工具包,保存.csv文件时不要表头的实例
2018/06/14 Python
Python中Proxypool库的安装与配置
2018/10/19 Python
Tesserocr库的正确安装方式
2018/10/19 Python
使用Python 统计高频字数的方法
2019/01/31 Python
Python 2/3下处理cjk编码的zip文件的方法
2019/04/26 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
python 追踪except信息方式
2020/04/25 Python
python中判断数字是否为质数的实例讲解
2020/12/06 Python
selenium如何定位span元素的实现
2021/01/13 Python
Antonioli美国在线商店:时尚前卫奢华
2019/07/29 全球购物
软件测试常见笔试题
2012/02/04 面试题
乌鸦喝水教学反思
2014/02/07 职场文书
向国旗敬礼活动小结
2014/09/27 职场文书
2015年学雷锋活动总结
2015/02/06 职场文书
比较几种Redis集群方案
2021/06/21 Redis
MySQL系列之十一 日志记录
2021/07/02 MySQL