CSS多行省略號詳解

一、CSS多行省略號後面帶查看更多

在一些移動端或是Web端的需要在省略文本後添加」查看更多「鏈接，方便用戶進行相關操作，下面給出一個實例。

.ellipsis{
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.more{
    color: #FF0000;
}

HTML結構：

<p class="ellipsis">
    這裡是省略後的內容，後面需要添加「<i class='more'>查看更多</i>」
</p>

可以看到，使用了display: -webkit-box;實現省略，並設置了最大行數，然後使用overflow: hidden;進行省略，最後在文本後面添加一個」查看更多「的鏈接，這樣就能實現省略和查看更多的聯動。

二、CSS多行省略號顯示

有一種情況是需要在文本的上面或者下面進行多行省略號的顯示。

.ellipsis-top {
    position: relative;
    max-height: 144px;
    overflow: hidden;
}

.ellipsis-top::before {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    padding-left: 40px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #f5f5f5 30%);
}

.ellipsis-bottom {
    position: relative;
    max-height: 144px;
    overflow: hidden;
}

.ellipsis-bottom::after {
    content: "...";
    position: absolute;
    top: 0;
    right: 0;
    padding-left: 40px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #f5f5f5 30%);
}

使用:before和:after來實現上面和下面的多行省略號，需要保證max-height和line-height一致，這樣的話，當省略號加文本的高度大於max-height時，就會觸發省略。

三、CSS多行省略號無效

有時候會出現在設置了多行省略號之後，無法實現省略的情況，這個時候可能是因為父容器沒有指定高度或者行高不一致導致的。

.parent {
    height: 100px;
    line-height: 20px;
}
.child {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

可以通過在父容器設置height和行高一致，同時在子容器上面設置-flex-box來實現多行省略號，並且需要設置overflow:hidden才能實現省略。

四、CSS文字溢出顯示省略號

有時候我們需要在單行文字或者表格的單元格中實現文字溢出後省略號顯示。

.single-line{
    white-space: nowrap;//不能換行
    overflow: hidden;//超出隱藏
    text-overflow: ellipsis;//超出顯示省略號
}

上面的代碼實現了單行文本溢出後省略號的顯示，設置white-space: nowrap表示不能換行，overflow: hidden表示超出隱藏，text-overflow: ellipsis表示超出後顯示省略號。

五、CSS省略號自動撐開寬度怎麼辦

當容器寬度隨着內容自適應，但是又需要實現文字超出省略號的效果時，就可以使用下面的代碼來實現。

.auto-width-ellipsis{
    max-width: 100px;//限制寬度最大值
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

這樣設置之後，當容器寬度大於100px時，就會出現文字省略號的效果。