[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:normal 範例:
 
這是中文字的測試,我一共打三遍來增加長度:這是中文字的測試這是中文字的測試這是中文字的測試。
English Test here, word will break. this doc's url:https://km.nicetypo.com/doc/14255761ab263ef642f85507e120678b

第二個屬性 word-break: keep-all
這個規則在英文的部分,與之前的 Normal 是一模一樣的。
但是在中日韓文的部分,就不允許在字尾斷行。
也就是說除非你手動換行或是有標點符號,不然中文就不換行。
下面的範例中文部分都是沒有換行的(跟之前一樣),但在標點符號的部分會換行
word-break:keep-all 範例
 
這是中文字的測試,我一共打三遍來增加長度:這是中文字的測試這是中文字的測試這是中文字的測試。
English Test here, word will break. this doc's url:https://km.nicetypo.com/doc/14255761ab263ef642f85507e120678b

第三個屬性 word-break: break-all
這個屬性對於想要精準控制文字區塊的朋友來說,就是你的好朋友了,
因為這個屬性不管你是中日韓文或是英文,也不管文字字串有多長,寬度到了,就給你強制換行,不會破壞版面。
word-break:break-all 範例
 
這是中文字的測試,我一共打三遍來增加長度:這是中文字的測試這是中文字的測試這是中文字的測試。
English Test here, word will break. this doc's url:https://km.nicetypo.com/doc/14255761ab263ef642f85507e120678b

如何使用 word-break


如果要用 word-break 來替你的文字區塊設置斷行的話,
寫法是這樣的:
div.breakAll{word-break: break-all}
div.keepAll{word-break: keep-all}

下次可以試試看囉 ^^