學透CSS-一次性解決text-justify，text-orientation等冷門屬性文本屬性（下） （連載中）

這是我參與8月更文挑戰的第9天，活動詳情查看：8月更文挑戰

讀不在三更五鼓，功只怕一曝十寒。看完以爲有收穫的，點個讚唄！！！

前言

在上中兩篇介紹文本屬性的時候，咱們基本已經學會了不少以前沒有使用過的屬性，今天咱們接着來看更多的文本屬性，CSS的世界是精妙的，無盡的，僅僅但願同這三篇文章，能夠入得CSS的基礎門。人生短暫，學無止盡。

text-justify

兼容性

此屬性目前被列爲「有風險」在候選推薦期間被丟棄。所以，不建議在生產中使用此屬性，由於它不太可能在不久的未來成爲全部瀏覽器的標準。

兼容性不好，目前也就火狐瀏覽器能夠用！！！僅學習。

定義

規定text-align: justify;使用的對齊方式。

text-justify 必須與text-align: justify;同時出現，若是你還不知道text-align: justify;是啥，請當即閱讀學透CSS-深度剖析text-align家族 文本屬性（上） （連載中），看完再來看這篇文章。

屬性值

auto

默認值，容許瀏覽器肯定對齊方式是否更好地處理爲inter-word或inter-character。這在內容語言在呈現以前未知的多語言場景中頗有幫助。

inter-word

經過調整單詞間距來指定文本對齊

inter-character

經過調整字符間距指定文本對齊

可能單純的看inter-word和inter-character的截圖不是太清楚，放一張對比圖。

第一張：inter-character 第二張：inter-word 仔細看最明顯的兩處： 就不容易了 A Your worst battle is 第一張圖your的字符間距是比較大的，第二章Your worst中間的間距比較大

none

禁用對齊方法。消除父元素帶來的inter-word和inter-character屬性

distribute

已被廢除，不提倡使用

親測在火狐瀏覽器表現以下

text-orientation

兼容性

瀏覽器的兼容仍是不錯的，除了IE（永遠的噩夢）

定義

在文字的書寫模式爲豎直的狀況下，改變字符的方向。

豎直模式 writing-mode

1. writing-mode: vertical-lr;

2. writing-mode: vertical-rl;

屬性值：

mixed

默認值。水平腳本中的字符順時針旋轉 90°。 仔細看截圖中的英文和數字，方向是被旋轉 90°.

upright

此值會將字符自己從旋轉 90°旋轉到其天然位置。注意這個關鍵字會致使全部字符被視爲從左到右，也就是 direction 被強制設爲 ltr(從左往右)。

sideways

垂直書寫模式下的全部文本都橫向顯示，就像在水平佈局中同樣，整行順時針旋轉 90°。。

sideways-right：

某些瀏覽器將此值視爲sideways爲向後兼容而保留的值的別名。

text-combine-upright

首先我以爲這個屬性就是對text-orientation的一個補充，主要的做用就是想把某些字符放在一行顯示，例如 上面的截圖頻繁出現的13，在豎直模式下，是分兩行顯示的。爲了讓他們在一行顯示就須要用到這個屬性了。

兼容性

火狐和谷歌兼容仍是不錯的，能夠用。

屬性值

all

垂直包含框中全部連續的排版字符在同一行水平顯示，佔用垂直框中單個字符的空間。 請仔細閱讀這句話！！！

all 例子1

writing-mode: vertical-lr;
      text-combine-upright: all;
      
       <p>
        我說道：「爸爸，你走吧。」他往車外看了看，說：「我買幾個橘子去。你就在此地，不要走動。」
        我看那邊月臺的柵欄外有幾個賣東西的等着顧客。走到那邊月臺，須穿過鐵道，須跳下去又爬上去。
        父親是一個胖子，走過去天然要費事些。我原本要去的，他不願，只好讓他去。我看見他戴着黑布小帽，
        穿着黑布大馬褂12，深青布棉袍，蹣跚13地走到鐵道邊，慢慢探身下去，尚不大難。但是他穿過鐵道，
        要爬上那邊月臺 ，就不容易了。
      </p>
複製代碼

最終的效果：

是否是瞬間明白了，讓你仔細閱讀的緣由啦！！！

all 例子2

p{
  writing-mode: vertical-lr;
}
span{
  text-combine-upright: all;
}
 <p>
  我說道：「爸爸，你走吧。」他往車外看了看，說：「我買幾個橘子去。你就   在此地，不要走動。」
 <span id="leftSpan" >202108</span>就不容易了。
 </p>
複製代碼

最終的效果

這下是否是知道怎麼使用了，瀏覽器並不會識別那些要顯示在一行，須要咱們指定哪些字符顯示在一行。

digits <integer>

兼容性

對於這個屬性，特意放出了兼容性圖。從圖中看，這個屬性基本無法使用

垂直包含框中全部連續的 ASCII 數字在同一行上水平顯示，佔用垂直框中單個字符的空間，最多爲指定的整數。若是沒有指定整數，則默認值爲 2 位。任何低於 2 和高於 4 的都是無效的。

語法

text-combine-upright: digits 2;