文本省略效果.png

• 常見的單行省略：

.line-one{
            display: block; //關(guān)鍵屬性
            height: 22px; //關(guān)鍵屬性
            white-space: nowrap; //關(guān)鍵屬性
            overflow: hidden; //關(guān)鍵屬性
            text-overflow: ellipsis; //關(guān)鍵屬性
            border-bottom: 1px dashed #f9f9f9;
            margin-bottom: 10px;
            padding-bottom: 8px;
}

• 多行省略：

// 都是關(guān)鍵屬性，不設(shè)置則顯示不出來省略號
.line-two{
    height: 44px; //定高
    display: block;
    display: -webkit-box; //將對象作為彈性伸縮盒子模型顯示，
    -webkit-line-clamp: 2; //設(shè)置顯示的文本的行數(shù)
    -webkit-box-orient: vertical; //設(shè)置或檢索伸縮盒對象的子元素的排列方式 
    overflow: hidden;
    text-overflow: ellipsis;
}

源碼：

.ellipsis-demo{
            width: 150px;
            margin:20px 0;
            font-size:14px;
            color:#333;
            line-height: 22px;
            color:#fff;
            border:1px solid #f2f2f2;
            padding: 10px 0;
        }
        .line-one{
            display: block;
            height: 22px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            border-bottom: 1px dashed #f9f9f9;
            margin-bottom: 10px;
            padding-bottom: 8px;
        }
        .line-two{
            height: 44px;
            word-break: break-word;
            display: block;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;

        }

<div class="ellipsis-demo">
    <div class="line-one">這是第一行內(nèi)容，很長很長的第一行內(nèi)容</div>
    <div class="line-two">這是第2天，第2天的內(nèi)容，很長很長的第一行內(nèi)容。這是第2天，第2天的內(nèi)容，很長很長的第一行內(nèi)容設(shè)置多行省略</div>
</div>