透過CSS的writing-mode屬性，就可將文字變成直排甚至還可設定左排或右排

　　最近梅干花了點時間，將梅干的申時七茶的茶包網站重新設計與改寫，讓網站閱讀起來更舒服，同時載入速度更快，而此次的改版中，梅干也嘗試著將原來的橫排文字，改成直式呈現，雖然先前在梅問題教學網中，也曾將日期改成直式，但那時是使用CSS3的旋轉方式，將文字轉向。

但最近發現在CSS屬性中，竟然也有一個文字模式writing-mode，可以將文字變直排，甚至還可以設定左排或右排，且效果還蠻不錯，因此下回若想將文字變直排的朋友，不妨也可試試CSS中的writing-mode屬性吧！

---

Step1
首先，先將文字建立好，而瀏覽器預設的模式，文字會以橫排的方式呈現。

---

Step2
接著在CSS中，加入writing-mode:vertical-lr;後，文字就會變成直排，同時由左向右排。

---

Step3
當把writing-mode:vertical-lr;改成writing-mode:vertical-rl;後，就會變成由右向左排，甚至加入text-orientation:upright;也可讓英文字轉向變直排，因此下回當要直排文字時，不妨也可試試看囉！

---

#範例預覽