處理表格中長字串不換行問題
問題描述
在 Angular Material 表格中，當單元格內含有長字串（特別是 URL 編碼字串，如 %E5%93%A1%E5%B7%A5%E7%A6%8F%E5%88%A9...）時，會導致表格跑版。這是因為這類長字串沒有自然的斷點（如空格），瀏覽器不知道在哪裡換行，造成單元格過寬，破壞了表格的整體布局。
原始 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 基礎上添加以下屬性：
.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; /* 確保文字正常換行 */
}屬性說明
word-wrap: break-word / overflow-wrap: break-word
overflow-wrap是word-wrap的新標準名稱功能：當一個單詞太長無法放入容器時，允許在單詞內部換行
特性：優先在自然斷點處換行，只有在必要時才會斷開單詞
word-break: break-word
功能：控制單詞如何在行尾斷開
區別於
break-all：break-all會在任何字符處斷行（包括英文單詞中間）break-word會先嘗試在單詞邊界換行，必要時才會斷開單詞
white-space: normal
功能：確保文本會在到達容器邊緣時自動換行
防止文本被意外設為
nowrap（這會阻止所有換行）
為什麼有效？
URL 編碼的字串（如 %E5%93%A1...）是連續的字符，沒有空格或其他自然換行點。
word-break: break-word告訴瀏覽器，當這類長字串無法完整顯示在容器內時，可以在適當位置進行斷行與
break-all不同，它不會隨意切斷正常英文單詞，保持了文本可讀性overflow-wrap: break-word作為補充，確保在各種瀏覽器中都能實現類似效果
效果比較
不使用換行屬性: 長字串會超出容器寬度，破壞表格布局
使用 word-break: break-all: 解決了換行問題，但會隨意切斷英文單詞
使用 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 和其他相關屬性，可以有效解決長字串不換行導致的布局問題，同時保持文本的可讀性。
Last updated