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

最新推荐文章于 2024-06-13 11:14:08 发布

TYOUKAI_

最新推荐文章于 2024-06-13 11:14:08 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript

本文链接：https://blog.youkuaiyun.com/TYOUKAI_/article/details/78251194

前端专栏收录该内容

2 篇文章

订阅专栏

效果：当文本字数超过9个时，隐藏第九个字之后文本，使用“…显示全部”的标签代替。点击“…显示全部”显示所有文本信息。“…显示全部”变成“收起”。点击“收起”又变回9个字文本。
原理：在一个名为fullText的div标签中存放所有文本，在另一个名为subText的div标签中存放9个字的文本，在一个a标签中实现点击效果。页面初识加载时，将要显示的文本放入一个text变量中，将fullText的div的文本置为空，判断text长度是否大于9，若大于9，在名为subText的div标签中显示前9个字的文本+“…显示全部”。若不大于9，在subText显示全部文本。
点击a标签时，判断a标签的文本内容，若为“…显示全部”，将text变量中的值赋给subText，并将a标签改为”收起”。若a标签中的内容为”收起”，将text变量的前9个值赋给subText并将a标签改为“…显示全部”。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="GBK">
<title>隐藏功能</title>
</head>
<body>
<div id="d1"><div id="fullText">以前铿锵有力的灵魂之声，不知道什么时候，被默默沉寂在心底。渴望着黑夜里，能有一双巨大有力的手，将我的冰冷握紧。在这些安静的日子里，一个人无言无语，对着搁置了很久的书，认真的翻阅起来。里面的一些话语，带着禅意，让人顿悟，豁然开明。</div> <div id="subText"></div><a id="btn" onclick="change()"></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 > 9) {
            document.getElementById("subText").innerHTML = text.substring(0, 9);
            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, 9);
            t.innerHTML = "...显示全部"
        }
    }
    show();

</script>
</body>
</html>