怎麼用css實現超出顯示省略號效果

CSS中的超出省略是指當一個元素內的文字超出了其容器的寬度或高度時，透過CSS的屬性設定來以省略號的形式來顯示該文字內容的一種方式。

一般情況下，文字溢位時瀏覽器會自動將文字換到下一行進行顯示。但是在某些情況下，特別是在行動端或響應式設計中，我們希望將文字內容顯示在一行內，並在文字超出容器寬度時以省略號的形式進行顯示。

而CSS中的超出省略屬性就可以幫我們達到這個效果。這裡介紹CSS中的兩個常用超出省略屬性：text-overflow和white-space。

1. text-overflow

text-overflow是CSS3新增的屬性，用來設定當文字溢出容器時如何處理。此屬性有以下幾個值：

• clip：文字溢出容器後直接截斷。
• ellipsis：文字溢出容器後以省略號的形式進行顯示。
• string：文字溢出容器時使用指定的字串替換預設省略號。

在使用text-overflow時一般還需要設定overflow:hidden和white-space:nowrap來限制內容只能在一行內顯示，如下程式碼：

div {
    width: 200px;
    height: 30px;
    background-color: #f3f3f3;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

2. #white-space

white-space屬性用於設定如何處理元素內的空白符號（例如空格、回車等）。此屬性有以下幾個值：

• normal：預設值，當一個元素內有連續的多個空白符號時，只顯示一個空格。
• nowrap：不允許文字換行，強製文字在同一行內顯示。
• pre：保留空白符，文字顯示與原始檔相同。
• pre-wrap：保留空白符，允許文字換行。
• pre-line：合併連續的多個空白符，允許文字換行。

在使用white-space屬性實作超出省略時，需將white-space的值設為nowrap，overflow的值設為hidden，下列程式碼：

div {
    width: 200px; 
    height: 30px; 
    background-color: #f3f3f3; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap; 
}

#的是，使用white-space屬性會影響整個元素內文字的顯示，因此需要結合text-overflow屬性一起使用。

總結

以上是怎麼用css實現超出顯示省略號效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！