文本省略顯示

時間 2020-08-18

標籤文本省略顯示简体版

原文原文鏈接

一個盒子裏文字過長，若是容器寬度固定，那麼文字就會下溢，這樣也就不美觀。css

因此在最末位超出寬度時用省略號顯示會美觀一點。html

點擊看效果demojquery

demo源碼。web

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="./demo.css" rel="stylesheet">
    <style>
    .text_overflow_1{
        width:27em; 
        white-space:nowrap; 
        text-overflow:ellipsis; 
        -o-text-overflow:ellipsis; 
        overflow:hidden;
        text-align: center;
        margin: 0 auto;
        margin-bottom: 20px;
    }
    .text_overflow_2{
        width:27em; 
        white-space:nowrap; 
        text-overflow:ellipsis; 
        -o-text-overflow:ellipsis; 
        -moz-binding:url('ellipsis.xml#ellipsis'); 
        overflow:hidden;
        margin: 0 auto;
        margin-bottom: 20px;
    }
    .zxx_text_overflow3{
        width:24em; 
        height:1.3em; 
        overflow:hidden; 
        zoom:1;
        margin: 0 auto;
        margin-bottom: 20px;
    }
    .zxx_text_overflow3 .text_con{
        float:left; 
        height:1.3em; 
        margin-right:3em; 
        overflow:hidden;
    }
    .zxx_text_overflow3 .text_dotted{
        width:3em; 
        height:1.31em; 
        float:right; 
        margin-top:-1.3em;
    }
    .zxx_text_overflow4{
        margin: 0 auto;
        margin-bottom: 20px;
        text-align: center;
    }
    .zxx_text_overflow5{
        margin: 0 auto;
        margin-bottom: 20px;
        text-align: center;
        width:400px;
    }
    .zxx_text_overflow6{
        width: 400px; 
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin: 0 auto;
        margin-bottom: 20px;
        text-align: center;
    }
    </style>
</head>
<body>
    <div class="demo-container">
        <div class="method-title">方法1</div>
        <div title="look at here!" class="text_overflow_1">
            這種方法除了火狐下表現不盡人意，其餘IE， 谷歌下表現能夠。不少文字，這裏有不少文字
        </div>
        <div class="method-title">方法2</div>
        <div title="look at here!" class="text_overflow_2">
            這種方法主要解決火狐下的差別，這裏有不少文字，這裏有不少文字，這裏有不少文字
        </div>
        <div class="method-title">方法3</div>
        <div class="zxx_text_overflow3" >
            <div class="text_con" >這是一段比較長的文字，用來測試是否文字溢出時會用省略號顯示。</div>
            <div class="text_dotted" >…</div>
        </div>
        <div class="zxx_text_overflow3" >
            <div class="text_con" >這是一段很短的文字拿來對比。</div>
            <div class="text_dotted" >…</div>
        </div>
        <div class="method-title">方法4</div>
        <div class="zxx_text_overflow4">
            這種方法用的是jquery的方法替換掉最大字符長度之外的字符，這裏要寫長一點
        </div>
        <div class="method-title">方法5</div>
        <div class="zxx_text_overflow5">
            這種方法用的是jquery的方法替換掉最大字符長度之外的字符，這裏要寫長一點
        </div>
        <div class="method-title">方法6</div>
        <div class="zxx_text_overflow6">
            這種方法用的是多行文字句末顯示省略號，這裏要寫長一點這裏要寫長一點這裏要寫長一點這裏要寫長一點這裏要寫長一點這裏要寫長一點這裏要寫長一點這裏要寫長一點這裏要寫長一點
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $(function() {
           
            //限制字符個數
            // $(".zxx_text_overflow").each(function(){
                var maxwidth=43;

                if($('.zxx_text_overflow4').text().length>maxwidth){
                    $('.zxx_text_overflow4').attr('title', $('.zxx_text_overflow4').text());
                    $('.zxx_text_overflow4').text($('.zxx_text_overflow4').text().substring(0, maxwidth));
                    $('.zxx_text_overflow4').html($('.zxx_text_overflow4').html()+'...');
                }
            // });

            var wordLimit=function(){
                $('.zxx_text_overflow5').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>
</body>
</html>

　　效果圖瀏覽器