限制文字字数--点击展开点击收起

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>限制文字字数--点击展开点击收起</title>
    <style>
        li{
            list-style: none;
        }
        p{
            width:300px;
            height:100px;
            text-indent:2em;
            line-height:150%;
            margin:5px 0 0;
        }
        p a{
            color:#FDCD3D;
        }
    </style>
</head>
<body>
<h1>一、</h1>
<ul class="rdlist">
    <li><span>测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多</span></li>
    <li><span>测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多</span></li>
    <li><span>测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多</span></li>
    <li><span>测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多</span></li>
    <li><span>测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多</span></li>
    <li><span>测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多少文字超出16个会隐藏测试多</span></li>
</ul>

<h1>二、</h1>
<div class="">
    <a href="javascript:void" class="clickbtn"><<点击展开</a>
    <p>如果字数超过最大字数，超出部分用...代替，并且在后面加上点击展开的链接如果字数超过最大字数，超出部分用...代替，并且在后面加上点击展开的链接如果字数超过最大字数，超出部分用...代替，并且在后面加上点击展开的链接如果字数超过最大字数，超出部分用...代替，并且在后面加上点击展开的链接如果字数超过最大字数，超出部分用...代替，并且在后面加上点击展开的链接如果字数超过最大字数，超出部分用...代替，并且在后面加上点击展开的链接如果字数超过最大字数，超出部分用...代替，并且在后面加上点击展开的链接如果字数超过最大字数，超出部分用...代替，并且在后面加上点击展开的链接</p>
</div>

<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function(){
    //一：
    console.log($('li').eq(0).children($('span')).text());
    for(var i=0;i<$('li').length;i++){
        var str = $('li').eq(i).children($('span')).text().substr(0,16) + " ...";
        $('li').eq(i).children($('span')).text(str);
    }
});

// 二：
$(function(){
    $("p").each(function(){
        var maxwidth=60;//设置最多显示的字数
        var text=$(this).text();
        if($(this).text().length>maxwidth){
            $(this).text($(this).text().substring(0,maxwidth));
            $(this).html($(this).html()+"...");//如果字数超过最大字数，超出部分用...代替，并且在后面加上点击展开的链接；

        };
        $('.clickbtn').click(function(){
            if($(this).text()=='<<点击展开'){
                $(this).text('<<点击收起');
                $('p').text(text);
            }else{
                if($('p').text().length>maxwidth){
                    $('p').text($('p').text().substring(0,maxwidth));
                    $('p').html($('p').html()+"...");
                    $(this).text('<<点击展开');
                };
            }
        });

    })
})

</script>
</body>
</html>
在这里插入图片描述
限制文字字数--点击展开点击收起

猜你喜欢
