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

Aomine 發布于2019-08-29 10:58 / 1266人閱讀

摘要：今天在搜索實現中文兩端對齊的解決方法時，偶然發現了這個我遇到問題是看不到效果，無論是英文還是中文，在和下都不起作用。首先，大家要知道，是專門為英文設計的，誰叫是老外發明的呢，用來實現英文語句的兩端對齊。

今天在搜索“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：
hello, text justify.


 hello, text justify.


中 文 兩 端 對 齊


中 文 兩 端 對 齊

不明所以，在旭哥的文章看到的關于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%;
    }
}

云服務器 GPU云服務器文本兩端對齊 html兩端對齊字節對齊算法實現中文排版CSS心得

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111336.html

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

摘要：今天在搜索實現中文兩端對齊的解決方法時，偶然發現了這個我遇到問題是看不到效果，無論是英文還是中文，在和下都不起作用。首先，大家要知道，是專門為英文設計的，誰叫是老外發明的呢，用來實現英文語句的兩端對齊。今天在搜索CSS實現中文兩端對齊的解決方法時，偶然發現了這個hack：我遇到問題是：看不到效果，無論是英文還是中文，在IE和chrome下都不起作用。還好在StackOverflo...

luffyZh 2019-08-01 15:24 評論0 收藏0
CSS 文字兩端對齊的樣式怎么寫？

摘要：第二次嘗試之前說了看英文原版的文檔，好的，我發現了一個很不錯的屬性值。好東西啊好東西，在的基礎上新增了對最后一行的作用。我發現了一個屬性叫，它可以控制最后一行的文字對齊。效果就是文章最開始的圖片。，我覺得英文版可信度更高吧。前言這是一個很短的文章，內容也不多，目的其實在于吐槽MDN文檔。需求實現下圖中的樣式： showImg(https://segmentfault.com...

NSFish 2019-08-29 14:15 評論0 收藏0
CSS實現文字兩端對齊

摘要：后面查閱資料發現可以實現最后一行兩端對齊，但似乎兼容性很差不支持最近的項目遇到了這樣的需求：（要求標題部分不管文字多少，都必須兩端對齊） ? 如下圖：當時也沒有多想直接使用‘ ’進行代替，畢竟產品同學想快一點看到效果，不敢怠慢！不過到第二個頁面就傻眼了。 ? 如圖：這很明顯‘ ’已經無法滿足我了，只好上。這里簡單說下幾種空格的區別： ? ? ? 半角...

Baaaan 2019-04-23 13:16 評論0 收藏0
CSS 文本控制

摘要：學習一些文本控制的屬性，防止做傻事。是的升級版，當單行文本過長，超過文本邊界時自動換行。否則，文本仍然左對齊。 one more time one more chance. 一歩重頭學前端, css入門。學習一些 CSS 文本控制的屬性，防止做傻事。請大家對照下面列表檢驗下：會的、不會的、似懂非懂的。筆者是一個也不會。 white-space text-overflow: ell...

Taonce 2019-08-29 15:42 評論0 收藏0