建站
咨詢
售后
建站咨詢
新聞中心
大家好，我是半夏????，一個剛剛開始寫文的沙雕程序員.如果喜歡我的文章，可以關注? 點贊 ???? 加我微信：frontendpicker，一起學習交流前端，成為更優(yōu)秀的工程師～關注公眾號：搞前端的半夏,了解更多前端知識! 點我探索新世界！
成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設、高性價比武強網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式武強網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設找我們，業(yè)務覆蓋武強地區(qū)。費用合理售后完善，十載實體公司更值得信賴。
原文鏈接 ==>http://sylblog.xin/archives/36
前言
在深度剖析text-align家族和你不知道的下劃線-text-decoration兩篇介紹文本屬性的時候，我們基本已經(jīng)學會了很多之前沒有使用過的屬性，今天我們接著來看更多的文本屬性，CSS的世界是精妙的，無盡的，僅僅希望同這三篇文章，可以入得CSS文本屬性的基礎門。人生短暫，學無止盡。
text-justify
兼容性
此屬性目前被列為“有風險”在候選推薦期間被丟棄。因此，不建議在生產中使用此屬性，因為它不太可能在不久的將來成為所有瀏覽器的標準。
兼容性很差，目前也就火狐瀏覽器可以用！??！僅學習。
定義
規(guī)定text-align: justify;使用的對齊方式。
text-justify 必須與text-align: justify;同時出現(xiàn)，如果你還不知道text-align: justify;是啥，請立即閱讀學透CSS-深度剖析text-align家族 文本屬性（上） （連載中），看完再來看這篇文章。
屬性值
auto
默認值，允許瀏覽器確定對齊方式是否更好地處理為inter-word或inter-character。這在內容語言在呈現(xiàn)之前未知的多語言場景中很有幫助。
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
已被廢除，不提倡使用
親測在火狐瀏覽器表現(xiàn)如下
text-orientation
兼容性
瀏覽器的兼容還是不錯的，除了IE（永遠的噩夢）
定義
在文字的書寫模式為豎直的情況下，改變字符的方向。
豎直模式 writing-mode
- writing-mode: vertical-lr;
- writing-mode: vertical-rl;
屬性值：
mixed
默認值。水平腳本中的字符順時針旋轉 90°。
仔細看截圖中的英文和數(shù)字，方向是被旋轉 90°.
upright
此值會將字符本身從旋轉 90°旋轉到其自然位置。注意這個關鍵字會導致所有字符被視為從左到右，也就是 direction 被強制設為 ltr(從左往右)。
sideways
垂直書寫模式下的所有文本都橫向顯示，就像在水平布局中一樣，整行順時針旋轉 90°。。
sideways-right：
某些瀏覽器將此值視為sideways為向后兼容而保留的值的別名。
text-combine-upright
首先我覺得這個屬性就是對text-orientation的一個補充，主要的作用就是想把某些字符放在一行顯示，例如 上面的截圖頻繁出現(xiàn)的13，在豎直模式下，是分兩行顯示的。為了讓他們在一行顯示就需要用到這個屬性了。
兼容性
火狐和谷歌兼容還是不錯的，可以用。
屬性值
all
垂直包含框中所有連續(xù)的排版字符在同一行水平顯示，占用垂直框中單個字符的空間。
請仔細閱讀這句話?。?！
all 例子1
writing-mode: vertical-lr;
text-combine-upright: all;
我說道：“爸爸，你走吧?！彼囃饪戳丝矗f：“我買幾個橘子去。你就在此地，不要走動?！? 我看那邊月臺的柵欄外有幾個賣東西的等著顧客。走到那邊月臺，須穿過鐵道，須跳下去又爬上去。
父親是一個胖子，走過去自然要費事些。我本來要去的，他不肯，只好讓他去。我看見他戴著黑布小帽，
穿著黑布大馬褂12，深青布棉袍，蹣跚13地走到鐵道邊，慢慢探身下去，尚不大難?？墒撬┻^鐵道，
要爬上那邊月臺 ，就不容易了。
最終的效果：
是不是瞬間明白了，讓你仔細閱讀的原因啦！??！
all 例子2
p{
writing-mode: vertical-lr;
}
span{
text-combine-upright: all;
}
我說道：“爸爸，你走吧?！彼囃饪戳丝矗f：“我買幾個橘子去。你就 在此地，不要走動?！? 就不容易了。
最終的效果
這下是不是知道怎么使用了，瀏覽器并不會識別那些要顯示在一行，需要我們指定哪些字符顯示在一行。
digits
兼容性
對于這個屬性，特地放出了兼容性圖。從圖中看，這個屬性基本沒法使用
垂直包含框中所有連續(xù)的 ASCII 數(shù)字在同一行上水平顯示，占用垂直框中單個字符的空間，最多為指定的整數(shù)。如果沒有指定整數(shù)，則默認值為 2 位。任何低于 2 和高于 4 的都是無效的。
語法
text-combine-upright: digits 2;
分享標題： 一文學會text-justify，orientation,combine文本屬性
網(wǎng)址分享：http://www.dlmjj.cn/article/dsojess.html
