使用 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 源代码：

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

使用 js 实现文本过多时隐藏部分文本相关推荐

html隐藏域保存数组,关于给JS组合数组赋值给隐藏域问题
关于给JS组合数组赋值给隐藏域问题我在页面上有动态添加的文本框,我用JS组合数组成字符串,给隐藏域,然后后台取值,在IE8,火狐,谷歌上测试可以接到值,但在IE6 360这种浏览器上发现一个BUG, ...
html字段隐藏,HTML5+CSS3实现超酷登录窗口(自动隐藏默认文本及判断必填字段)
内容介绍热点排行相关文章下载地址↓ 效果非常不错的登录窗口,输入框获取焦点后会自动隐藏默认文本,如果为空会提示必填字段 ,经测试,效果相当不错,感兴趣的朋友可以参考下哈在网页head区添加以下代码 ...
[js] 在不支持js的浏览器中如何隐藏JavaScript代码？
[js] 在不支持js的浏览器中如何隐藏JavaScript代码? 在<script>标签之后的代码中添加"<!-– ",不带引号. 在</script&g ...
js设置控件的隐藏与显示的两种方法
js设置控件的隐藏与显示的两种方法: js设置控件的隐藏与显示,设置控件style的display和visibility属性就可以了. 用JavaScript隐藏控件的方法有两种,分别是通过设置控件的 ...
html弹出层全覆盖滚动条,JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
一.去除滚动条方法给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加overflow:hidden属性样式中需要对IE6.7及其它浏览器用hack辨别, ...
从零开始学前端：显示隐藏与文本溢出 --- 今天你学习了吗？（CSS：Day16）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:浮动 - 今天你学习了吗?(CSS:Day15) 文章目录从零开始学前端:程序猿小白也可以完全掌握!-今 ...
js控制ul的显示隐藏，对象的有效范围
js控制ul的显示隐藏,对象的有效范围 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
JS获取本地IP显示隐藏IP
JS获取本地IP&显示隐藏IP 前言 JS获取本地IP方法遇到问题解决方案火狐(FireFox)删除隐藏IP 谷歌(Chrome)删除隐藏IP 前言这段时间一直在搞前端,我一个软件开发 ...
python怎么隐藏输入法_如何创建隐藏的文本输入框？
我正在编写一个wtforms自定义表单,它包括多布尔复选按钮/单选按钮和一个隐藏的文本输入. 如果用户单击"其他"按钮,则启用文本输入,用户可以手动编写内容如果用户取消单击&q ...

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

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

使用 js 实现文本过多时隐藏部分文本相关推荐

最新文章

热门文章