css: 長單詞怎麼斷行好呢？

就是想問，網站的長單詞（超出容器寬度）各位是怎麼處理的呢？

我知道word-wrap: break-word或者hyphens（靠特殊橫杠分斷）

據我觀察外國網站基本是不處理的，超出就超出。難道就沒有很好的方法嗎

未來又可能會用哪種方式處理長單詞呢？

容器較窄的情況下，為了提高空間利用率以及美觀，可以考慮用 hyphens 屬性（可以參考印刷品，比如字典的每一欄都比較窄，往往會加 hyphen 處理折行）。如果需要兼容老瀏覽器可以使用 Hyphenopoly.js 之類的庫。注意因為 hyphenation 這個東西是語言相關的，所以庫也會比較大。

容器較寬時可以考慮不處理，自動換行。

Unicode 有一個 SHY 字元，如果只有一兩個長單詞的話可以插到 Hyphenation point 上。

認真地做 Hyphenation 可以參考 Knuth-Liang 演算法（ @李阿玲 ）。

CSS Hyphens 我記得有些瀏覽器處理不了 Non-dictionary word，另外 Hyphenation 都比較依賴 Language Tagging，所以記得寫 lang 屬性。

hyphens: auto 就好了 (盡量換行而不 hyphen, 但如果一個詞獨自就能超出一行就 hyphen)

舊瀏覽器就 break-all , break-word 加 display: inline-block

這種東西，js控制啊，substring啊 然後加點點點。

其實幾乎所有模板都提供了類似substring的功能啊，把字數顯示控制在一定範圍內。

css控制，兼容性非常不好，而且麻煩，在很多設備上，下一行的字頂部還能漏出來點。得計算好行高字體大小防止下一行漏出點頂部，多麻煩