html长文本隐藏部分内容,文本过多时隐藏部分文本js实现

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

龙行    web前端    2019-2-15    1937    0评论

情景描述：有时候我们需要显示部分文字，就像 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 标签改为“…查看全文”。

隐藏功能

物联网是新一代信息技术的重要组成部分，也是“信息化”时代的重要发展阶段。其英文名称是：“Internet of things(IoT)”。顾名思义，物联网就是物物相连的互联网。这有两层意思：其一，物联网的核心和基础仍然是互联网，是在互联网基础上的延伸和扩展的网络；其二，其用户端延伸和扩展到了任何物品与物品之间，进行信息交换和通信，也就是物物相息。物联网通过智能感知、识别技术与普适计算等通信感知技术，广泛应用于网络的融合中，也因此被称为继计算机、互联网之后世界信息产业发展的第三次浪潮。物联网是互联网的应用拓展，与其说物联网是网络，不如说物联网是业务和应用。因此，应用创新是物联网发展的核心，以用户体验为核心的创新2.0是物联网发展的灵魂。

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();

评论一下

赞助站长

赞助站长X

版权申明：此文如未标注转载均为本站原创，自由转载请表明出处《龙行博客》。

本文网址：https://www.liaotaoo.cn/165.html