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

最新推荐文章于 2023-07-05 10:57:27 发布

weixin_30839881

最新推荐文章于 2023-07-05 10:57:27 发布

阅读量417

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/shoolnight/p/6408629.html

版权

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

转载于:https://www.cnblogs.com/shoolnight/p/6408629.html

weixin_30839881

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js内容溢出用省略号（...）表示

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.10.2.min....
复制链接

扫一扫