用JS限制字数，超出部分以省略号...显示

weixin_33920401

于 2017-01-17 16:36:00 发布

阅读量569

点赞数 1

原文链接：http://www.cnblogs.com/hbqfr/p/6293661.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .r-advInfo-itemText{
            padding: 25px 20px;
            background: pink;
            color: #000;
            border-radius: 40px;
            width: 200px;
        }
        .r-advInfo-item p {
            margin-top: 10px;
            font-size: 14px;
            color: #000;
            line-height: 24px;
            margin-top:20px;
        }


    </style>
</head>
<body>
<div class="r-advInfo-itemText">
    <p id="qfr"></p>
</div>
<script>

    LimitNumber('只显示20个文字只显示20个文字只显示20个文字只显示20个文字只显示20个文字只显示20个文字只显示20个文字只显示20个文字只显示20个文字只显示20个文字只显示20个文字只显示20个文字','qfr');
    /*用js限制字数，超出部分以省略号...显示*/
    function LimitNumber(txt,idName) {
        var str = txt;
        str = str.substr(0,20) + '...' ;
        var id=document.getElementById(idName);
        id.innerText=str;
    }

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

　　代码的最终效果：