8.1 屬性 text-overflow
文字環繞和控制其顯示是網頁設計中非常重要的方面，特別是當你在處理長文本行或有限空間的容器時。屬性 text-overflow、white-space 和 word-wrap（現在稱為 overflow-wrap）允許你控制在這種情況下文字的行為。
屬性 text-overflow 管理超出容器邊界的文字顯示方式。它與 white-space 和 overflow 屬性結合使用，以創造文字截斷效果並添加省略號。
值：
clip: 截斷超出容器邊界的文字ellipsis: 在截斷的文字末尾添加省略號（...）
使用範例：
CSS
.container {
width: 200px;
white-space: nowrap;
overflow: hidden;
border: 1px solid #000;
}
.clip {
text-overflow: clip;
}
.ellipsis {
text-overflow: ellipsis;
}
HTML
<body>
<div class="container clip">這段文字會被截斷在容器的邊界。</div>
<div class="container ellipsis">這段文字會被截斷並以省略號取代。</div>
</body>
8.2 屬性 white-space
屬性 white-space 控制空白符號和文本換行的處理。它允許你設定空白、tab 和新行在文本中的處理方式。
值：
normal: 空白和換行照常處理（預設）nowrap: 文字在一行中顯示，不換行pre: 空白和換行會被保留，就像在 HTML 標籤<pre>中一樣pre-wrap: 空白和換行會被保留，但文字可以在必要時換行pre-line: 換行會被保留，但空白照常處理break-spaces: 空白和換行會被保留，長空白可以導致換行
使用範例：
CSS
.normal {
white-space: normal;
}
.nowrap {
white-space: nowrap;
}
.pre {
white-space: pre;
}
.pre-wrap {
white-space: pre-wrap;
}
HTML
<body>
<div class="normal">這段文字會換到下一行，如果空間不足的話。</div>
<div class="nowrap">這段文字不會換到下一行，會在一行中顯示。</div>
<div class="pre">
這段文字 會保留
所有空白和換行。
</div>
<div class="pre-wrap">
這段文字會換到下一行，但也會保留
所有空白和換行。
</div>
</body>
8.3 屬性 overflow-wrap
屬性 overflow-wrap（以前稱為 word-wrap）控制超出容器邊界的單詞換行。它可以防止長單詞造成容器溢出，這些單詞無法被分割。
值
normal: 單詞按照標準換行規則進行換行break-word: 即使需要分割單詞，也可以進行換行
使用範例：
CSS
.container {
width: 200px;
border: 1px solid #000;
}
.normal {
overflow-wrap: normal;
}
.break-word {
overflow-wrap: break-word;
}
HTML
<body>
<div class="container normal">這段文字會換到下一行，如果空間不足的話。</div>
<div class="container break-word">這個很長的單詞不會換行在下一行，如果空間不足。</div>
</body>
代碼說明：
overflow-wrap: normal;: 單詞按照標準規則換行，不會分割單詞overflow-wrap: break-word;: 長單詞會被分割並換到下一行，如有需要
8.4 屬性的結合使用
屬性 text-overflow、white-space 和 word-wrap 經常一起使用，以達到有限空間容器中所需的文本顯示效果。
使用範例：
CSS
.container {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
overflow-wrap: break-word;
border: 1px solid #000;
}
HTML
<body>
<div class="container">這段文字會被截斷並以省略號取代，如果容器空間不足。</div>
</body>
代碼說明：
white-space: nowrap;: 文字在一行中顯示，不換行overflow: hidden;: 隱藏超出容器邊界的文字text-overflow: ellipsis;: 在截斷的文字末尾添加省略號overflow-wrap: break-word;: 長單詞會被分割並換到下一行，如有需要
GO TO FULL VERSION