js內容溢出用省略號（...）表示

本文轉載自查看原文 2017-05-02 13:31 1806 前端淺知識

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    </head>
    <style type="text/css">
        .line{
            width:100px;
            height:20px;
            background: blanchedalmond;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .block{
            width: 250px;
            background: greenyellow;
        }
    </style>
    <body>
        <section class="line">
            boom clap you can you up!come on!
        </section>
        <section class="block">
            the day you went the way .l lose my life!call me cray call me back,call sofarling the day you went the day
        </section>

    </body>
    <script type="text/javascript">
        var wordlimit=function(){
            $(".block").each(function(){
                var copythis=$(this.cloneNode(true)).hide().css({
                    'position':'absolute',
                    'width':'auto',
                    'overflow':'visible'
                });
                $(this).after(copythis);
                if(copythis.width()>$(this).width()){
                    $(this).text($(this).text().substring(0,$(this).html().length-4));
                    $(this).html($(this).html()+'...');
                    copythis.remove();
                    wordlimit();
                }
                else{
                    copythis.remove();
                    return;
                }
            });
        }
        wordlimit();
    </script>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jQuery關於文字內容溢出用點點點(…)省略號表示 CSS-文本溢出省略號表示用css3讓溢出內容顯示省略號文字內容溢出用點點點(...)省略號一行內容溢出隱藏省略號代替多行溢出隱藏顯示省略號功能的JS實現 CSS和JS實現文本溢出顯示省略號 html文字溢出以省略號（...）替代 CSS文本溢出顯示省略號 css多行溢出省略號