CSS技巧之'text-justify'

果凍tfzwgd發表於2019-04-19
CSS

CSS中,當text-align屬性被賦值為justify時,text-justify屬性經常被用來和text-align屬性一起設定文字兩端對齊的方式。

p {
  text-align: justify;
  text-justify: inter-word;
}複製程式碼

Values

  • inter-word: 表示當前文字是通過調整單詞(word)之間的間隔來實現兩端對齊的,實際上是增加了多餘的單詞間距.這個屬性值其實是word-spacing 屬性的變形.
  • inter-character:
    表示當前文字是通過調整字元(character)之間的間隔來實現兩端對齊的,實際上是增加了多餘的字元間距.這個屬性值其實是letter-spacing 屬性的變形.
  • auto: 允許瀏覽器從inter-word 和inter-character中挑選合適的值作為兩端對齊的對齊方式.多語言情景下,文字渲染之前無法得知這是哪一國的語言.這個時候,(auto)就會允許瀏覽器使用者代理來根據當前文字的語言來選擇適合的兩端對齊方式.
  • none: 禁用兩端對齊規則,也就是移除任何可能通過(樣式)層疊生效的兩端對齊方式的設定或者重寫.

CSS技巧之'text-justify'

到底什麼是兩端對齊?

兩端對齊文字是一個很富有想象力的說法,它用來描述文字是如何填充滿包含它的父容器的方式.實際上,你可以已經很熟悉兩端對齊的文字了,但是你卻不認識它.如果你曾經使用過文字編輯軟體,比如Word和Google Docs的話,你就可能非常熟悉下面的這些圖示了(icons):

CSS技巧之'text-justify'

前面三個是用來設定文字對齊的,就好像CSS的text-align屬性, 可以設定文字左對齊、右對齊、和居中對齊.

第四個icon就是兩端對齊選項.它讓文字內容填充滿文件的整個寬度,不管有沒有影響到單詞間距,每一行文字都會緊靠邊界右對齊.

CSS技巧之'text-justify'

Google Docs中的兩端對齊文字每一行都會擴大單詞間距來佔據整篇文件的寬度.

text-justify 屬性允許我們實現同樣的效果,但是它可以靈活變通來決定是通過單詞(words)間距還是字元(characters)間距來調整文字兩端對齊方式.

瀏覽器相容性

text-justify 屬性已經被收入了CSS Text Module Level 3 文件。

由於可能會在候選推薦期間就被廢棄掉,當前text-justify屬性已經被列為"at risk"(危險)級別.在不遠的將來,它不太可能被納入各瀏覽器通用標準,因此並不建議在專案生產中使用這個屬性.

當前完全支援它的只有Firefox 55+. Internet Explorer 11 和 Edge 14+也支援此屬性,但是隻有inter-word值有效,而且因為是非正式的屬性值,W3C規範也未收錄它.

瀏覽器支援資料來自 Caniuse, 點選瀏覽更多. 有資料表明瀏覽器版本支援該特性.

CSS技巧之'text-justify'


相關文章