[CSS3:Word-Break]用CSS來設置中英文的文字斷行樣式
一般在設計網頁樣式的時候， 對於那種有大量中英文混搭或是亞洲文字(中、日、韓等雙位元字)和西歐文字夾雜的內容， 會蠻讓人傷腦筋的。
主要就是因為中文字(或日、韓文)與英文字在寬度和斷行的模式與規則都不太相同， 為了控制內容區塊的版面一致性和美觀，經常就是要大費周章。
針對這個文字斷行問題，我們就這個機會來跟大家分享一下，如何用 CSS 語法來設置中英文斷行的規則。
CSS: WORD-BREAK 語法
如果要運用CSS來設置文字斷行的規則，對應的語法就是： word-break。 這個語法很好記憶，語法直接就是語意：文字斷行，Word-Break 在用法上，有三個屬性，分別是：
- Normal、
- Keep-All、
- Break-All。
下面我們分別來聊一下這三種屬性各有哪些不同：
第一個屬性 word-break: normal，
這是預設的屬性，如果沒有特別下這個 word-break 語法的話，就是依據這個屬性來設置規則。 Normal 的設置是正常的文字斷行規則，像是英文(或西歐文字)的話，就是在寬度允許的範圍內，最後一個字的字尾斷行。 而中文(或日韓文)則都是字尾斷行。 但是如果當英文字本身的字串太長時，好比打的是一串網址啦、很長的數字、電子郵件地址，或是真的就是一個超長的單字(好比 abracadabra 這樣的)，若是寬度不足，那麼就會超出文字區塊。
第二個屬性 word-break: keep-all，
這個規則在英文的部分，與之前的 Normal 是一模一樣的。 但是在中日韓文的部分，就不允許在字尾斷行。 也就是說除非你手動換行或是有標點符號，不然中文就不換行。 下面的範例中文部分都是沒有換行的(跟之前一樣)，但在標點符號的部分會換行
第三個屬性 word-break: break-all。
這個屬性對於想要精準控制文字區塊的朋友來說，就是你的好朋友了， 因為這個屬性不管你是中日韓文或是英文，也不管文字字串有多長，寬度到了，就給你強制換行，不會破壞版面。
如何使用 word-break
如果要用 word-break 來替你的文字區塊設置斷行的話，寫法是這樣的：
div.breakAll{word-break: break-all}
div.keepAll{word-break: keep-all}下次可以試試看囉 ^^
Originally published at km.nicetypo.com.
