js内容溢出用省略号（...）表示

<!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>

posted @ 2017-05-02 13:31 Monroe_Yu 阅读(3574) 评论(0) 编辑收藏举报

Monroe.Yu

生活不止有眼前的苟且，还有诗和远方...

js内容溢出用省略号（...）表示

公告

搜索

常用链接

随笔分类

随笔档案

相册

阅读排行榜

评论排行榜

推荐排行榜

最新评论