CSS 文字溢位屬性解讀：text-overflow 和 white-space

CSS 文字溢位屬性解讀：text-overflow 與white-space，需要具體程式碼範例

引言：
在網頁設計中，常常會遇到文字內容超過容器寬度或高度的情況，這需要我們採取一些方法來處理溢出的文字。 CSS 提供了一些屬性來幫助我們控製文字的溢出，其中最常用的兩個屬性是 text-overflow 和 white-space。本文將介紹這兩個屬性的特性及其使用方法，並提供具體的程式碼範例。

一、text-overflow 屬性
text-overflow 屬性用來指定當文字溢出包含它的容器時，如何進行處理。它有三個可選值：

1. clip：預設值，表示將溢出的文字內容裁剪，隱藏在容器之外，不顯示溢出的部分。
2. ellipsis：表示在溢出的文字內容結尾加上省略號。
3. inherit：表示從父元素繼承 text-overflow 屬性的值。

下面是一個範例，展示了text-overflow: ellipsis 屬性的使用方法：

.container {
  width: 200px;
  white-space: nowrap; /* 文本不换行 */
  overflow: hidden; /* 超出容器宽度时隐藏溢出内容 */
  text-overflow: ellipsis; /* 溢出文本末尾添加省略号 */
}

透過將容器設定為固定寬度，禁止換行，隱藏溢出內容，並在末尾添加省略號，我們可以在超出容器寬度時達到省略文字的效果。

二、white-space 屬性
white-space 屬性用來控製文字在容器中的排列方式。它有以下幾個值：

1. normal：預設值，表示文字將根據空白符號進行換行和空格的合併。
2. nowrap：表示文字在容器中不換行，溢出部分隱藏。
3. pre：表示文字在容器中保留原始格式，換行符號會被保留，空格不會被合併。
4. pre-wrap：表示文字在容器中保留原始格式，換行符和空格都會被保留。
5. pre-line：表示文字在容器中保留原始格式，換行符號會被保留，空格會被合併。

下面是一個範例，展示了white-space: nowrap 屬性的使用方法：

.container {
  width: 200px;
  white-space: nowrap; /* 文本不换行 */
  overflow: hidden; /* 超出容器宽度时隐藏溢出内容 */
}

透過將white-space 屬性設為nowrap，我們可以實現讓文字在容器中不換行，這會使得超出容器寬度的文字隱藏起來。

結論：
text-overflow 和 white-space 是兩個在處理文字溢位時非常有用的 CSS 屬性。透過結合使用它們，我們可以控製文字的顯示方式，使得文字能夠自動省略或隱藏溢出部分。同時，我們也可以根據具體需求調整屬性值的組合，來實現不同的文字溢位效果。

除了上述範例中的用法，這兩個屬性還可以與其他 CSS 屬性結合使用，例如配合 overflow 屬性來處理溢出內容的顯示方式。希望透過本文的介紹，讀者對 text-overflow 和 white-space 屬性的使用有了更好的理解，能夠在實際開發中更靈活地處理文本溢出問題。

以上是CSS 文字溢位屬性解讀：text-overflow 和 white-space的詳細內容。更多資訊請關注PHP中文網其他相關文章！