[CSS:Justify]讓中英文混搭的文字,左右齊行

有朋友來信問說,
在他的網頁上,常有中文混搭著英文或者是特殊符號,
以致於在每一個段落的尾端,
總是有點坑坑巴巴的,
雖不至於有多難看,
但還是想知道,是否可以像在 Office Word 中那樣,
能設定一下左右齊行的文字對齊方式。
 
其實這個左右齊行的文字對齊功能,
在CSS的語法裡,是一直都存在的喔,
不過似乎較少人使用 :)
 
語法是:
text-align:justify;

但要注意的是,
使用這個文字對齊的語法時,
前提是受影響的文字串,必須是一個『區塊(Block)』才行。
 
我們來看看使用前後的效果,
下面是沒有使用左右齊行(text-align:justify)的效果,
可以看到文字塊中每一行的尾端都長短不一:
 
在這個文字區塊中,我們來測試如果有中文, English以及半形符號(對!括弧是最常發生的半形符號),那麼在文字串的尾端就很容易有凹凸不齊的現象,雖然不至於影響什麼,但如果一定要要求整齊,最好是加上Justify這個語法,讓整個文字塊能左右都對齊。

接下來是使用了左右齊行(text-align:justify)的效果,行尾切齊了:
 
在這個文字區塊中,我們來測試如果有中文, English以及半形符號(對!括弧是最常發生的半形符號),那麼在文字串的尾端就很容易有凹凸不齊的現象,雖然不至於影響什麼,但如果一定要要求整齊,最好是加上Justify這個語法,讓整個文字塊能左右都對齊。

Readers comment