封面輪過一圈了，沒東西可以講了，只好又放回整張的大圖 www

昨天介紹了文字間距與對齊，學會利用字距、行距，以及水平與垂直對齊，讓文字排列得更清楚、更好閱讀。

不過，當文字內容太長，或是遇到使用者輸入的超長單字與網址時，即使間距調整得再漂亮，也可能超出元素範圍，破壞原本的版面。這時候就需要進一步控制文字的換行與顯示方式。

今天要來認識 CSS 中與文字換行、斷字和省略相關的屬性，學會處理各種長文字內容，讓版面在不同情況下都能維持整齊。直接開始介紹吧！

文字換行超出處理

在網頁開發中，文字內容經常不是由開發者所控制的，可能是由使用者輸入，又或是動態產生的。因此，有時候需要適當設定文字的換行方式，以確保最佳的閱讀體驗。

White-space 空白與換行控制

white-space 屬性主要用來控制元素內的空白字元和換行行為。當我們在寫 HTML 程式碼時，輸入空白、換行、縮排或換行元素 <br>，這些都會被瀏覽器自動處理。這個屬性就是用來控制這個的。

.text {
  white-space: normal;
  white-space: nowrap;
  white-space: pre;
  white-space: pre-wrap;
  white-space: pre-line;
}

<div class="text">
  這是 多個空格的文字 還有換行
  這是一行很長很長很長很長很長的文字，用來測試自動換行的效果，看看會不會超出容器寬度。
</div>

Word-break 斷字規則

word-break 屬性控制文字超出容器時的斷字方式，通常中文文字遇到元素邊界會自動換行，但英文單字預設不會在中間截斷。

.text {
  word-break: normal;        /* 預設值 */
  word-break: keep-all;      /* 保持中英文單字完整 */
  word-break: break-all;     /* 任意字元間斷行 */
  overflow-wrap: break-word; /* 必要時才會在單字間斷行 */
}

當遇到超長單字或網址時，可使用此屬性來處理文字的換行規則。

Text-wrap 文字換行方式

text-wrap 能提供更進階的換行控制，可在特定情境下避免各行字數懸殊，維持視覺上的平衡與美觀。

.text {
  text-wrap: wrap;    /* 正常換行（預設）*/
  text-wrap: nowrap;  /* 不換行 */
  text-wrap: balance; /* 平衡每行長度，適合標題 */
  text-wrap: pretty;  /* 避免最後一行只有一個字，適合段落 */
}

Text-overflow 文字省略處理

當文字過長需要截斷並顯示省略號時，以下提供兩種常用的處理方式：

/* 單行文字省略 */
.text-ellipsis {
  white-space: nowrap;     /* 防止換行 */
  overflow: hidden;        /* 隱藏溢出部分 */
  text-overflow: ellipsis; /* 顯示省略號 */
}

/* 多行文字省略 */
.multi-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 指定行數 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

總結

這幾天深入探討了 CSS 很多關於文字部分的屬性，從文字裝飾、行高行距到文字對齊和換行處理。透過這些具體技術和範例，你現在能夠：

1. 運用字體大小、字重、字體系列等屬性提升網頁的視覺層次。
2. 掌握行高和字距的設定，創造最佳閱讀體驗。
3. 控制文字的水平和垂直對齊方式。
4. 處理文字換行、超出和省略的各種情況。

掌握這些技巧後，你能夠設計出既美觀又易讀的網頁內容，有效傳達訊息並提升使用者體驗。