標籤：blog http ar sp on div 2014 問題 log
CSS中一提到單詞斷行，最先映入腦海的肯定是word-break和word-wrap這兩條屬性。但對於這兩條屬性到底有什麼區別，相容性如何，我一直都概念模糊。今天抽空把它們以及CSS3中新加入的斷行屬性之間的區別和作用理理清楚，做一下筆記。
在英文段落中有時會碰到一些很長的單詞，這些單詞的長度超出容器寬度。在預設的頁面文檔中，如果單詞長度超出了單行，會被自動移到下一行中，圖中puzzling!就被自動換行了；而如果單詞本身的長度已經超出容器寬度，常規的文檔對此就沒有約束力了，圖中dddddd…這個單詞就這麼溢出了：
為了不讓這樣超長的單詞超出容器寬度，可以用word-break: break-all 強制斷行。
但是強制換行會把完整的單詞打斷，會影響閱讀，而且一旦用word-break: break-all，單詞內斷行的頻率會非常高（puzzling!這個不詞不算長單詞，也被輕易的打斷了）。我們需要的只是在單詞本身長度超出容器寬度的時候強制斷行，一般情況下，只需要根據空格來判斷後面的單詞是否需要換行，所以用word-wrap: break-word 就可以了：
所以用一個word-wrap: break-word，就能滿足網頁上最基本的換行排版了。
讓我們再深入一點。讀書時候英語老師曾教過我們，英語書寫在換行的時候，為了節約紙張，把每一行最後的格子也利用起來，可以給沒寫完的那個單詞加一個橫杠“-”在下一行繼續寫完這個單詞即可。在網頁中有沒有辦法實現？答案還是有的，只是這是一個CSS3的屬性：hyphens: auto
hyphens目前被瀏覽器支援度還比較有限，目前的版本的Google瀏覽器Chrome就不支援，據我測試在Firefox，IE10+，Safari中還是被支援的，不過要給她加上幾個熟悉的首碼：
1234 |
-moz-hyphens: auto;-ms-hyphens: auto;-webkit-hyphens: auto;hyphens: auto; |
同時頁面的編碼也需要寫成這種格式允許的語種：
1 |
<html lang="en-US"> |
於是puzzling!這個單詞在支援hyphens的瀏覽器中就自動加了橫杠斷行了：
配合word-wrap: break-word，就是一般我們需要的排版效果了：
1234567 |
div {-moz-hyphens: auto;-ms-hyphens: auto;-webkit-hyphens: auto;hyphens: auto;word-wrap: break-word;} |
另外，hyphens還有一個有趣的值：manual，可以通過特殊符號給單詞人為的添加橫杠斷行，但個人覺得很少能用得到。具體可以參考mozilla的官方文檔，裡面還有瀏覽器安全色性列表
本文的執行個體代碼在這裡：http://blog.brain1981.com/wp-content/uploads/css-wordBreak.html。可以在不同的瀏覽器中開啟這個頁面查看單詞斷行的區別。
本站所有文章均為原創，歡迎轉載，但請註明文章出處：http://blog.brain1981.com/706.html英文單詞斷行問題：CSS中word-break、word-wrap以及hyphens的相容性和區別
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
