探索發現：CSS實現中文兩端對齊

King發表於2019-02-16
CSS

今天在搜尋“CSS實現中文兩端對齊”的解決方法時，偶然發現了這個hack：

我遇到問題是：看不到效果，無論是英文還是中文，在IE和chrome下都不起作用。還好在StackOverflow上找到了解決方法 ：）

樣式：

div.justify 
{ 
　　text-align: justify; width:200px; font-size:15px; color:red; 
　　border:1px solid blue; height:18px;
}
div.justify > span 
{ 
　　display: inline-block /* Opera */; 
　　padding-left: 99%; 
}

HTML：

<div class="justify">hello, text justify.</div><br/>
<div class="justify"> hello, text justify.<span></span></div><br/>
<div class="justify">中 文 兩 端 對 齊</div><br/>
<div class="justify">中 文 兩 端 對 齊<span></span></div>

不明所以，在旭哥的文章看到的關於text-align:justify的解釋是這樣的

要理解原理，我們首先要搞清楚文字的兩端對齊宣告text-align:justify起作用的本質。首先，大家要知道，text-align:justify是專門為英文設計的，誰叫CSS是老外發明的呢，用來實現英文語句的兩端對齊。注意這裡的，是語句的對齊。大家應該都知道，英文語句是一個單詞一個單片語合而成的，每個單詞之前使用空格分隔。

text-align:justify之所以可以讓英文段落兩端對齊，那是因為每個英文單詞之前那個透明看不見的空格被拉伸了。注意，是空格被拉伸了，對，只有空格。因此，當我們寫下一段洋洋灑灑中文內容的時候，text-align:justify是沒有任何作用的，跟沒設定沒任何區別。為什麼呢？很簡單，因為中文是一個一個漢字，漢字之間是沒有空格的，自然也就不能拉伸，自然也就不能兩端對齊。怎麼辦呢？難道中文就不行了嗎？
當然不是！既然正常的中文文字之間沒有空格，我們自己加一點不就好了。例如下面程式碼：

感覺還是無法理解這個hack的原理。求教！

然後又去w3school上查閱了關於text-align:justify的解釋：

justify：實現兩端對齊文字效果，它會帶來自己的一些問題。

值 justify 可以使文字的兩端都對齊。在兩端對齊文字中，文字行的左右兩端都放在父元素的內邊界上。然後，調整單詞和字母間的間隔，使各行的長度恰好相等。您也許已經注意到了，兩端對齊文字在列印領域很常見。不過在 CSS 中，還需要多做些考慮。

要由使用者代理（而不是 CSS）來確定兩端對齊文字如何拉伸，以填滿父元素左右邊界之間的空間。例如，有些瀏覽器可能只在單詞之間增加額外的空間，而另外一些瀏覽器可能會平均分佈字母間的額外空間（不過 CSS 規範特別指出，如果 letter-spacing 屬性指定為一個長度值，“使用者代理不能進一步增加或減少字元間的空間”）。還有一些使用者代理可能會減少某些行的空間，使文字擠得更緊密。所有這些做法都會影響元素的外觀，甚至改變其高度，這取決於使用者代理的對齊選擇影響了多少文字行。

CSS 也沒有指定應當如何處理連字元（注1）。大多數兩端對齊文字都使用連字元將長單詞分開放在兩行上，從而縮小單詞之間的間隔，改善文字行的外觀。不過，由於 CSS 沒有定義連字元行為，使用者代理不太可能自動加連字元。因此，在 CSS 中，兩端對齊文字看上去沒有列印出來好看，特別是元素可能太窄，以至於每行只能放下幾個單詞。當然，使用窄設計元素是可以的，不過要當心相應的缺點。

注1：CSS 中沒有說明如何處理連字元，因為不同的語言有不同的連字元規則。規範沒有嘗試去調和這樣一些很可能不完備的規則，而是乾脆不提這個問題。

還是沒有找到合理解釋。只能暫時先記錄在這裡了。

附：用偽元素修改：

.field-title{
    width: 65px;
    height:40px;
    text-align:justify;
    &:after{//文字兩端對齊
        content: ``;
        display: inline-block;
        padding-left: 99%;
    }
}

相關文章