一般在設計網頁樣式的時候， 對於那種有大量中英文混搭或是亞洲文字(中、日、韓等雙位元字)和西歐文字夾雜的內容， 會蠻讓人傷腦筋的。 主要就是因為中文字(或日、韓文)與英文字在寬度和斷行的模式與規則都不太相同， 為了控制內容區塊的版面一致性和美觀，經常就是要大費周章。 針對這個文字斷行問題， 我們就這個機會來跟大家分享一下，如何用 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}

下次可以試試看囉 ^^