# 處理表格中長字串不換行問題

### 問題描述

在 Angular Material 表格中，當單元格內含有長字串（特別是 URL 編碼字串，如 `%E5%93%A1%E5%B7%A5%E7%A6%8F%E5%88%A9...`）時，會導致表格跑版。這是因為這類長字串沒有自然的斷點（如空格），瀏覽器不知道在哪裡換行，造成單元格過寬，破壞了表格的整體布局。

<figure><img src="https://887996651-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMfWnm9OyvfbzOzPO6ZJt%2Fuploads%2F8WsOIRbCayPU4tWirV9B%2Fimage.png?alt=media&#x26;token=cbd2b2c5-3135-4565-8ae4-dee8d6044c6b" alt=""><figcaption></figcaption></figure>

### 原始 CSS

我最初用於限制文字顯示行數的 CSS：

```css
.limited-text {
  max-height: 53px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
```

這組 CSS 可以限制文字最多顯示 2 行，並在超出時顯示省略號，但無法處理長字串不換行的問題。

### 解決方案

#### 最佳解決方案

在原有 CSS 基礎上添加以下屬性：

```css
.limited-text {
  max-height: 53px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-wrap: break-word;      /* 允許長單詞換行 */
  overflow-wrap: break-word;  /* word-wrap 的標準替代品 */
  word-break: break-word;     /* 在必要時允許單詞斷開 */
  white-space: normal;        /* 確保文字正常換行 */
}
```

#### 屬性說明

1. **word-wrap: break-word / overflow-wrap: break-word**
   * `overflow-wrap` 是 `word-wrap` 的新標準名稱
   * 功能：當一個單詞太長無法放入容器時，允許在單詞內部換行
   * 特性：優先在自然斷點處換行，只有在必要時才會斷開單詞
2. **word-break: break-word**
   * 功能：控制單詞如何在行尾斷開
   * 區別於 `break-all`：
     * `break-all` 會在任何字符處斷行（包括英文單詞中間）
     * `break-word` 會先嘗試在單詞邊界換行，必要時才會斷開單詞
3. **white-space: normal**
   * 功能：確保文本會在到達容器邊緣時自動換行
   * 防止文本被意外設為 `nowrap`（這會阻止所有換行）

### 為什麼有效？

URL 編碼的字串（如 `%E5%93%A1...`）是連續的字符，沒有空格或其他自然換行點。

* `word-break: break-word` 告訴瀏覽器，當這類長字串無法完整顯示在容器內時，可以在適當位置進行斷行
* 與 `break-all` 不同，它不會隨意切斷正常英文單詞，保持了文本可讀性
* `overflow-wrap: break-word` 作為補充，確保在各種瀏覽器中都能實現類似效果

### 效果比較

1. **不使用換行屬性**: 長字串會超出容器寬度，破壞表格布局
2. **使用 word-break: break-all**: 解決了換行問題，但會隨意切斷英文單詞
3. **使用 word-break: break-word**: 長字串會適當換行，同時保持英文單詞的完整性

### 應用場景

這個解決方案特別適用於：

* 表格單元格中顯示長 URL 或編碼字串
* 顯示可能包含長文件路徑的內容
* 展示 API 返回的原始 JSON 數據
* 需要在有限空間內展示沒有自然斷點的長字串

### 瀏覽器兼容性

* `word-break: break-word` 在現代瀏覽器中都有良好支持
* 為了最大兼容性，建議同時使用 `word-wrap: break-word` 和 `overflow-wrap: break-word`
* `-webkit-` 前綴屬性主要用於 Safari 和舊版 Chrome

### 結論

在處理表格或其他需要控制寬度的 UI 元素中，正確設置文本換行屬性非常重要。通過組合使用 `word-break: break-word`、`overflow-wrap: break-word` 和其他相關屬性，可以有效解決長字串不換行導致的布局問題，同時保持文本的可讀性。
