一文學會text-justify，orientation,combine文本屬性

2022 年 4 月 22 日
筆記

大家好，我是半夏👴，一個剛剛開始寫文的沙雕程序員.如果喜歡我的文章，可以關注➕ 點贊 👍 加我微信：frontendpicker，一起學習交流前端，成為更優秀的工程師～關注公眾號：搞前端的半夏,了解更多前端知識! 點我探索新世界！

原文鏈接 ==>//sylblog.xin/archives/36

前言

在深度剖析text-align家族和你不知道的下劃線-text-decoration兩篇介紹文本屬性的時候，我們基本已經學會了很多之前沒有使用過的屬性，今天我們接着來看更多的文本屬性，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

writing-mode: vertical-lr;

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;

一文學會text-justify，orientation,combine文本屬性

前言

text-justify

兼容性

定義