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

现在位置：首页 > 编程语言 > web前端 > 文本过多时隐藏部分文本js实现

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

龙行 web前端 2019-2-15 3285 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 标签改为“…查看全文”。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
<title>隐藏功能</title>
</head>
<body>
<div id="d1">
	<div id="fullText">

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

</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>

评论一下分享本文赞助站长