hyphens屬性在css中用于控制單詞內部是否自動斷行，其manual和auto是關鍵取值。hyphens: manual僅在html中手動插入軟連字符（-）處斷詞，適合需精確控制斷詞位置的場景，如專業術語；hyphens: auto則由瀏覽器根據語言規則自動判斷斷詞位置，適用于普通網頁內容，使排版更靈活；不同瀏覽器對auto模式下的斷詞策略可能有差異。使用時應根據內容類型選擇合適模式，并配合lang屬性以確保語言識別準確，同時注意移動端特別是ios上支持可能受限，需額外測試以避免長詞撐破布局或斷詞錯誤的問題。
在css中，hyphens屬性用來控制單詞內部是否自動斷行。常見的取值有none、manual和auto。這篇文章主要講的是auto和manual之間的區別，以及它們在實際使用中的效果。
什么是hyphens: manual？
當你設置hyphens: manual時，瀏覽器只會根據你手動插入的軟連字符（-）來決定在哪里斷詞。也就是說，它不會自動拆分單詞，除非你在HTML里明確告訴它“這里可以斷”。
舉個例子：
立即學習“前端免費學習筆記（深入）”；
<p>hello-world</p>
如果這段文字因為容器寬度不夠需要換行，那么瀏覽器會在-的位置斷開。如果你沒寫這個符號，即使單詞很長，也不會被拆分。
適合用在你想完全控制斷詞位置的場景，比如一些專業術語或者你不希望被錯誤拆分的詞匯。
hyphens: auto是怎么工作的？
而hyphens: auto就比較聰明一點了。瀏覽器會根據語言規則自動判斷哪些地方可以斷詞。比如英文中通常會在音節之間斷開，中文則可能根據標點或詞語邊界處理。
例如，一個很長的單詞如antidisestablishmentarianism，在auto模式下可能會被拆成：
anti- disestablishmentarianism
當然，具體怎么拆還取決于瀏覽器支持的語言規則和當前文本的語言類型（比如通過lang屬性指定語言）。
實際使用中的區別總結
- manual：只在你插入-的地方斷詞。
- auto：由瀏覽器根據語言規則自動決定斷詞位置。
- 如果你不插-，又設為manual，那長詞可能撐破布局。
- auto雖然方便，但不同瀏覽器的斷詞策略可能略有差異。
所以你可以根據內容類型選擇合適的模式。比如科技文檔建議用manual，避免術語被錯誤拆分；普通網頁內容可以用auto，更自然地適應不同屏幕寬度。
一些容易忽略的小細節
- 不是所有語言都支持自動斷詞。比如中文、日文等語言在某些瀏覽器中可能不主動拆詞，除非遇到標點。
- 使用hyphens時最好配合lang屬性，這樣瀏覽器能更好地識別語言規則。
- 某些移動端瀏覽器對hyphens的支持還不太完善，特別是在iOS上，有時候需要額外測試。
基本上就這些。用的時候根據內容控制斷詞方式，別讓長單詞破壞你的排版就行。
