問題1：設置了text-overflow : ellipsis未起作用

本文轉載自查看原文 2018-12-17 18:01 2164 小功能/ css3

<style type="text/css">
        * {
            padding: 0;
        }
        .div01 , .div02 {
            margin-top: 10px;
            border: 1px solid black;
        }
        .div01 {
            width: 150px;
            height: 80px;
            display: -moz-box;  /* 必須結合的屬性 ，將對象作為彈性伸縮盒子模型顯示 */
            display: -webkit-box;
            -moz-box-orient: vertical;/* 必須結合的屬性 ，設置或檢索伸縮盒對象的子元素的排列方式 */
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            
        }
        .div02 {
            width: 150px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
        }
    </style>
    <body>
        <div class="div01">
            <p>測試多行文字省略:測試多行文字省略測試多行文字省略測試多行文字省略測試多行文字省略測試多行文字省略</p>
        </div>
        <div class="div02">
            <p>測試單行文字省略:測試單行文字省略測試單行文字省略</p>
        </div>
    </body>

運行后顯示如下：

萬能解決方式：針對一行和多行的省略顯示

<style type="text/css">
        * {
            padding: 0;
        }
        .div01 , .div02 {
            margin-top: 10px;
            border: 1px solid black;
            width: 150px;
            height: 80px;
            display: -moz-box;  /* 必須結合的屬性 ，將對象作為彈性伸縮盒子模型顯示 */
            display: -webkit-box;
            -moz-box-orient: vertical;/* 必須結合的屬性 ，設置或檢索伸縮盒對象的子元素的排列方式 */
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .div01 {
            -webkit-line-clamp: 3;
            
        }
        .div02 {
　　　　　　　height:40px;
            -webkit-line-clamp: 1;
        }
    </style>
    <body>
        <div class="div01">
            <p>測試多行文字省略:測試多行文字省略測試多行文字省略測試多行文字省略測試多行文字省略測試多行文字省略</p>
        </div>
        <div class="div02">
            <p>測試單行文字省略:測試單行文字省略測試單行文字省略</p>
        </div>
    </body>

運行結果：

方法三：

js超出隱藏

/**
     * str(需要截取的字符串)
     * num(需要截取的字符串字數)
     */
    isOverLength(str,num) {
        var consultArray = str;
        for(var i=0; i<consultArray.length; i++){
            var txt = consultArray[i].innerText;
            if(txt.length <= num){
                return;
            }else {
                consultArray[i].innerText = txt.substr(0,num) + '...';
            }
        }
    }

免責聲明！

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

猜您在找 text-overflow: ellipsis;省略號顏色設置 text-overflow: ellipsis 在IE8、9下顯示問題記一個ios下text-overflow: ellipsis 與 text-align: justify 沖突的問題 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 5. 【原創】table設置text-overflow: ellipsis;（超出范圍顯示...）不生效 text-overflow: ellipsis 在IE8中不能顯示省略號的問題 vue項目text-overflow:ellipsis;在生產環境上不顯示...的問題 CCS3屬性之text-overflow:ellipsis;的用法和注意之處多行文字溢出[...]的實現(text-overflow: ellipsis) CSS中的text-overflow:clip|ellipsis的使用