如何實現CSS省略號表達文本溢出

一、理解文本溢出與省略號

在開始探討如何實現CSS省略號表達文本溢出之前，我們先來理解一下什麼是文本溢出和省略號。

文本溢出指的是，當所要顯示的文本內容超過了指定容器的寬度時，文本就會溢出容器。這時如果不加處理的話，文本會覆蓋到容器之外，影響頁面整體布局。

省略號指的是，在文本顯示不全的情況下，顯示省略號來代替隱藏的內容，從而達到優化頁面美觀度的效果。

二、使用text-overflow屬性來實現省略號

CSS3提供了一種實現文本溢出並用省略號來表示的方法——text-overflow屬性。

可以通過設置“text-overflow: ellipsis”來實現文本溢出時省略號的顯示。但是，需要注意的是，該屬性只有在滿足以下3個條件時，才能正常工作：

1、元素必須有一個確定的寬度（width）；

2、元素必須有一個溢出隱藏（overflow: hidden）或強制換行（word-wrap: break-word）的屬性；

3、元素必須有一個white-space屬性，該屬性設置為nowrap或pre-wrap。

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

三、使用JavaScript來實現動態省略號

在某些情況下，文本的長度是不確定的，而且固定寬度並不適用。這時，我們可以使用JavaScript對文本長度進行計算，然後根據計算結果來動態設置省略號。

    function textOverflow(element, maxLength) {
        if (element.innerHTML.length > maxLength) {
            element.innerHTML = element.innerHTML.substring(0, maxLength) + "...";
        }
    }
    // 使用方法
    textOverflow(document.getElementById("example"), 20);

四、結合CSS彈性盒子來實現省略號

CSS彈性盒子提供了靈活的布局方式，可以很方便地實現省略號效果。

可以通過將文字包裹在一個彈性容器內，同時設置nowrap、overflow: hidden、text-overflow: ellipsis和彈性盒的一些屬性，來實現省略號效果。

    .box {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: space-between;
        width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

五、使用CSS網格布局來實現省略號

CSS網格布局也可用於實現省略號效果，其實現方式與彈性盒子類似。只需將文字包裹在一個網格容器內，同時設置grid-template-columns等屬性即可。

    .grid {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        grid-template-rows: auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }