CSS 超出顯示省略號

在前端開發中，經常需要對一些過長的文本進行縮略顯示，這時候就需要用到 CSS 的超出顯示省略號的功能。本文將從多個方面對該功能做詳細的闡述。

1、基礎用法

CSS 的超出顯示省略號功能是通過 text-overflow 屬性實現的。該屬性有三個可選值：clip、ellipsis 和 string。其中，clip 表示超出部分被剪切掉不顯示；ellipsis 表示超出部分顯示為省略號；string 表示超出部分顯示為指定的字元串。

在使用時需要將 text-overflow 屬性與 white-space 和 overflow 屬性一起使用。white-space 屬性用來設置文字的換行方式，通常設置為 nowrap。overflow 屬性用來設置超出部分的顯示方式，通常設置為 hidden。

    <div class="ellipsis">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>

    .ellipsis {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

上述代碼就可以將 div 中的文本超出部分顯示為省略號。

2、不同方向的超出處理

在某些情況下，需要在不同方向上進行超出的處理，例如一個表格中的文本，需要在左、右兩側都進行省略處理。

這時候可以使用 direction 屬性來指定文本的排列方向。該屬性有兩個可選值：ltr 和 rtl。ltr 表示文本從左向右排列，rtl 表示文本從右向左排列。同時，還可以使用 unicode-bidi 屬性對文本進行雙向處理。

    <td class="ellipsis">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </td>

    .ellipsis {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        direction: rtl;
        unicode-bidi: bidi-override;
    }

上述代碼就可以將表格中的文本在左右兩側都進行省略顯示。

3、支持多行超出顯示

前兩部分介紹的均是針對單行文本進行超出顯示省略號的方式，但是在實際開發中，有些文本可能會超出多行。

在這種情況下，我們可以使用該文本所在元素的伸縮性來控制文本的高度，並使用 -webkit-line-clamp 屬性來控制超出部分的省略顯示。同時，需要將 overflow 屬性設置為 hidden。

    <div class="ellipsis-2">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in odio ut quam hendrerit sagittis ut sed sapien.
    </div>

    .ellipsis-2 {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

上述代碼可以將 div 中的文本超出兩行部分顯示為省略號。

4、超出部分添加提示信息

在實際開發中，有一些情況下需要將超出部分的內容隱藏起來，但是需要提供一個提示信息，讓用戶知道還有內容沒有顯示出來。

這時候可以在超出部分的下方添加一個提示元素，並使其部分覆蓋超出部分。具體實現可以使用絕對定位來控制元素的位置。

    <div class="ellipsis-3">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <span class="ellipsis-tip">...</span>

    .ellipsis-3 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        position: relative;
    }
    .ellipsis-tip {
        position: absolute;
        bottom: 0;
        right: 0;
        margin-right: 4px;
    }

上述代碼可以將 div 中的文本超出部分下方添加一個提示信息。

5、結語

以上就是 CSS 超出顯示省略號的一些常見應用。通過以上的介紹，相信大家已經可以熟練使用這些技巧來實現文本的縮略顯示了。