使用 js 实现文本过多时隐藏部分文本

情景描述： 有时候我们需要显示部分文字，就像 QQ 空间这样，先显示部分文字，加一个【查看全文】，让用户选择是否查看全部

解决方法：

第一步：在一个 id 为 fullText 的 div 标签中存放所有文本，在另一个名为 subText 的div标签中存放部分文本（20个字为例）的文本，在一个 a 标签中实现点击效果。页面初识加载时，将要显示的文本放入一个 text 变量中，将fullText 的 div 的文本置为空，判断 text 长度是否大于20，若大于20，在名为subText 的 div 标签中显示前20个字的文本+“…查看全文”。若不大于20，在subText 显示全部文本。

第二步：点击a标签时，判断 a 标签的文本内容，若为“…查看全文”，将 text 变量中的值赋给 subText，并将 a 标签改为”收起”。若a标签中的内容为”收起”，将 text 变量的前9个值赋给 subText 并将 a 标签改为“…查看全文”。

hideText.html 源代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<meta charset="UTF-8">
  5. <title>隐藏功能</title>
  6. </head>
  7. <body>
  8. <div id="d1">
  9. 	<div id="fullText">
  11. 	人工智能，英文缩写为AI。它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。
  12. 人工智能是计算机科学的一个分支，它企图了解智能的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器，该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等。人工智能从诞生以来，理论和技术日益成熟，应用领域也不断扩大，可以设想，未来人工智能带来的科技产品，将会是人类智慧的“容器”。人工智能可以对人的意识、思维的信息过程的模拟。人工智能不是人的智能，但能像人那样思考、也可能超过人的智能。
  14. </div>
  15. <div id="subText"></div><a id="btn" onclick="change()" style="color: blue;"></a>
  17. </div>
  18. <script>
  19.     var text;
  20.     function show() {
  21.         text = document.getElementById("fullText").innerHTML;
  22.         document.getElementById("fullText").innerHTML = "";
  23.         document.getElementById("subText").style.float = "left";
  24.         document.getElementById("btn").style.float = "left";
  25.         if(text.length > 20) {
  26.             document.getElementById("subText").innerHTML = text.substring(0, 20);
  27.             document.getElementById("btn").innerHTML = "...查看全文";
  28.         } else {
  29.             document.getElementById("subText").innerHTML = text;
  30.             document.getElementById("btn").innerHTML = "";
  31.         }
  32.     }
  33.     function change() {
  34.         var t = document.getElementById("btn");
  35.         var tt = document.getElementById("subText");
  36.         if(t.innerHTML == "...查看全文") {
  37.             tt.innerHTML = text;
  38.             t.innerHTML = "收起"
  39.         } else {
  40.             tt.innerHTML = text.substring(0, 20);
  41.             t.innerHTML = "...查看全文"
  42.         }
  43.     }
  44.     show();
  46. </script>
  47. </body>
  48. </html>

使用 js 实现文本过多时隐藏部分文本的更多相关文章

  1. js设置控件的隐藏与显示的两种方法

    js设置控件的隐藏与显示,设置控件style的display和visibility属性就可以了,下面有个示例,需要的朋友可以参考下用JavaScript隐藏控件的方法有两种,分别是通过设置控件的sty ...

  2. 【 D3.js 高级系列 — 1.1 】 封装文本自动换行

    在[高级 - 第 1.0 章]中讲解了在 SVG 中如何配合使用 text 和 tspan 来实现换行的功能,本文对此功能进行一下封装,以后就可以直接用了. 1. 引用 js 文件 下载地址:mult ...

  3. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

  4. js鼠标滑动图片显示隐藏效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. js基础--浏览器标签页隐藏或显示状态 visibility详解

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 在工作中我们可能会遇到这样的需求,当浏览器切换到别的标签页或着最小化时,我们需要暂停页面上正在播放的视频或者音乐,这个需求 ...

  6. Vue 使用Spread.js没有层级关系（隐藏与显示）

    Vue 使用Spread.js没有层级关系(隐藏与显示) 1.vue会给元素加一个监控属性.去掉 spread.js没有层级关系过半是column中值的问题

  7. HTML(多行)文本超过部分隐藏,末尾显示(...)

    HTML(多行)文本超过部分隐藏,末尾显示(...) <!DOCTYPE html> <html> <head> <meta charset="ut ...

  8. Dynamics CRM 365 不用按钮工具，直接用js脚本控制按钮的显示隐藏

    Dynamics CRM 365 不用按钮工具,直接用js脚本控制按钮的显示隐藏: try { // 转备案按钮 let transferSpecialRequestButton = parent.p ...

  9. js中点回车enter触发事件&layui弹窗按enter键不停弹窗问题的解决&js实现鼠标焦点自动落到文本框(layui)

     js中回车触发事件 一. document.onkeydown = function (e) { // 回车提交表单 // 兼容FF和IE和Opera var theEvent = window.e ...

随机推荐

  1. 一个好用的ssh终端：MobaXterm

    WSL由于没有图形界面,所有操作都是在命令行里执行,平时用来编译和跑CFD代码其实还是挺方便.不过有时候要查看WSL里的文件就比较麻烦,这时可以用SFTP这类工具,连接过去后直接操作文件.试过几个这类 ...

  2. 平衡树 替罪羊树（Scapegoat Tree）

    替罪羊树(Scapegoat Tree) 入门模板题 洛谷oj P3369 题目描述 您需要写一种数据结构(可参考题目标题),来维护一些数,其中需要提供以下操作: 插入xx数 删除xx数(若有多个相同 ...

  3. Openerp 修改 tree view 的列宽

    在 tree 的后边添加自定义css 列:“my_class" 然后在对应的css文件中,添加样式: 保存,重新刷新页面即可.

  4. winform FormBordStyle=none 及 wpf FormBordStyle=none 的鼠标点击移动问题

    winform: //bool formMove = false;//窗体是否移动 //Point formPoint;//记录窗体的位置 private void Login_MouseDown(o ...

  5. resotreIpAddress

    Given a string containing only digits, restore it by returning all possible valid IP address combina ...

  6. redis的数据类型（二）string类型

      下面讲解value,value包括String.List.Set.Sorted Set.Hash 一.String类型 1.string类型  String是最基本的类型,而且Stirng类型是二 ...

  7. 对.net事件的看法

    对.net事件的看法 一.事件的本质 事件是软件系统里的两个子系统之间,或者两个模块之间,或者两个对象之间发送消息,并处理消息的过程.在面向对象的世界里,就可以统一认为是两个对象之间的行为. 两个对象 ...

  8. SQL 事务与锁

    了解事务和锁 事务:保持逻辑数据一致性与可恢复性,必不可少的利器. 锁:多用户访问同一数据库资源时,对访问的先后次序权限管理的一种机制,没有他事务或许将会一塌糊涂,不能保证数据的安全正确读写. 死锁: ...

  9. 三：Bootstrap-js插件

    模式框: <button class="btn btn-default btn-lg" data-toggle="modal" data-target=& ...

  10. java自学-流程控制语句

    一件事情从开始到结束,需要先做什么,再做什么,最后再怎么做,这段过程就是一个流程.程序逻辑处理也是一个流程,java中有专门的流程控制语句,主要分为这几种:顺序,判断,选择,循环. 1.顺序流程  顺 ...