CSS文本溢出

一、什麼是CSS文本溢出

CSS文本溢出(overflow)指的是當內容超過一個容器的大小時，如何處理這些內容， 如何控制內容的顯示和隱藏。

當文本超出容器邊界時，可以通過設置容器的overflow屬性來控制文本是否溢出容器，以及如何處理溢出的文本。

二、CSS文本溢出的屬性

CSS文本溢出屬性有三個:overflow、text-overflow和white-space

1、overflow

overflow屬性用於處理內容溢出容器的情況。

overflow屬性有4個值:

overflow: visible; /*默認值，溢出的內容會出現在容器外面*/
overflow: hidden; /*溢出的內容將被裁剪*/
overflow: scroll; /*溢出的內容將出現滾動條*/
overflow: auto; /*如果溢出，則出現滾動條，否則不出現*/

2、text-overflow

text-overflow屬性用於控制溢出文本的表現形式。

text-overflow屬性只適用於單行文本。

text-overflow屬性有兩個值:

text-overflow: clip; /*默認值，超出的文本將被裁剪*/
text-overflow: ellipsis; /*超出的文本將以省略號的形式顯示*/

3、white-space

white-space屬性用於控制文本換行的規則。

white-space屬性有3個值:

white-space: normal; /*默認值，只要有需要，文本就會自動換行*/
white-space: nowrap; /*文本不會自動換行*/
white-space: pre; /*文本保留格式化之後的換行符*/

三、應用實例

1、文本截斷

文本截斷是指當文本長度超過容器寬度時，以省略號代替多餘的文本內容，這種情況下，可以將overflow設置為hidden，white-space設置為nowrap，text-overflow設置為ellipsis。

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

2、滾動條

如果希望當文本長度超過容器寬度時，出現滾動條，同時保持文本的原始格式，可以將overflow設置為auto，white-space設置為pre。

div {
   width: 200px;
   white-space: pre; 
   overflow: auto;
}

3、文本溢出

如果希望當文本長度超過容器寬度時，不出現滾動條，而是將文本隱藏掉，可以將overflow設置為hidden，white-space設置為normal。

div {
   width: 200px;
   white-space: normal; 
   overflow: hidden;
}

四、總結

在實際開發中，文本溢出處理經常用到，更好的控制文本溢出，可以將用戶體驗提升到更高的層次。