控制文本換行主要依靠word-break、overflow-wrap和white-space三個css屬性。1.word-break控制單詞內部換行，break-all允許在任何字符間斷開（中英文均打斷），keep-all僅在空格或連字符處換行（中文不打斷）；2.overflow-wrap（原word-wrap）決定長單詞是否斷開，break-word允許強制換行長單詞；3.white-space處理空白符與整體換行行為，如nowrap保持單行并配合溢出省略，pre-wrap等保留格式并控制換行。三者組合使用可靈活應對不同換行需求。
文本換行，說白了，就是控制文字在容器里怎么排列。css提供了幾種方式，讓你可以決定文字是溢出容器，還是乖乖地換行。核心就是word-break、word-wrap（現在更推薦overflow-wrap）和white-space這三個屬性。
控制文本換行，主要靠word-break、overflow-wrap和white-space這三個css屬性。它們各有側重，組合使用能滿足各種換行需求。
word-break: break-all vs word-break: keep-all，中文和英文的區別
word-break主要控制單詞內部的換行方式。break-all比較激進，直接在任何字符間都允許斷開，哪怕是英文單詞也會被粗暴地切斷。而keep-all則保守一些，它只在半角空格或連字符等地方換行，對于中文、日文、韓文等CJK字符，則視為一個整體，不會打斷。
立即學習“前端免費學習筆記（深入）”；
對于英文來說，break-all可能會破壞可讀性，因為它把一個完整的單詞拆開了。但對于中文，keep-all可能導致溢出，因為中文沒有天然的空格來斷句。所以，具體用哪個，取決于你的內容和設計目標。
.break-all { word-break: break-all; /* 英文和中文都會被打斷 */ } .keep-all { word-break: keep-all; /* 只在空格或連字符處換行，中文不換行 */ }
overflow-wrap: break-word vs word-wrap: break-word，歷史遺留問題？
overflow-wrap (以前叫做 word-wrap)，控制的是當一個單詞太長，無法放到一行時，是否允許它斷開。break-word就是允許長單詞斷開換行。這兩個屬性名實際上指向的是同一個功能，overflow-wrap是新標準，word-wrap是為了兼容老瀏覽器。
.break-word { overflow-wrap: break-word; /* 長單詞會被強制換行 */ /* 也可以用舊的寫法：word-wrap: break-word; */ }
這里有個小坑：如果你的內容里全是長長的URL，或者一串沒有空格的字符，僅僅使用break-word可能還不夠。因為瀏覽器默認會盡量避免在單詞中間斷開，除非實在沒有別的辦法。這時候，可能需要配合word-break: break-all一起使用，才能確保超長字符串被強制換行。
white-space: nowrap，單行文本的秘密武器
white-space控制的是空白符的處理方式。nowrap會讓文本強制保持在同一行，不會因為到達容器邊緣而換行。這在一些特定的布局場景下很有用，比如導航欄、標簽頁等。但要注意，如果文本太長，會直接溢出容器，所以通常需要配合overflow: hidden和text-overflow: ellipsis來使用，實現單行文本溢出省略的效果。
.nowrap { white-space: nowrap; /* 文本不會換行 */ overflow: hidden; /* 溢出隱藏 */ text-overflow: ellipsis; /* 顯示省略號 */ }
white-space還有其他幾個值，比如pre、pre-wrap、pre-line，它們分別對應著不同的空白符處理和換行規則，可以用來保留代碼中的格式，或者控制預格式化文本的顯示方式。
總的來說，word-break管單詞內部怎么斷，overflow-wrap管長單詞是否允許斷，white-space管空白符和整體的換行行為。理解了這三者的區別，就能靈活地控制文本換行了。
