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

    效果:当文本字数超过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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值