廢話不多說，看效果；
例項一：
實現這樣的效果： 文字是 從上而下，從左向右。顯示
屬性：
-webkit-writing-mode：vertical-rl;
writing-mode:lr-tb ;
html code
禮物是最好的表達友誼的一種物品。禮物是最好的表達友誼的一種物品。
禮物是最好的表達友誼的一種物品。禮物是最好的表達友誼的一種物品。
例項二：
效果圖
實現這樣的效果： 文字是 自上而下， 從右向左
屬性：
-webkit-writing-mode:vertical-rl;
writing-mode:tb-rl;
html code
禮物是最好的表達友誼的一種物品。禮物是最好的表達友誼的一種物品。
禮物是最好的表達友誼的一種物品。禮物是最好的表達友誼的一種物品。
禮物是最好的表達友誼的一種物品。禮物是最好的表達友誼的一種物品。
取值
horizontal-tb:水平方向自上而下的書寫方式。即。left-right-top-bottom（類似ie私有值 lr-tb）
vertical-rl:垂直方向自右而左的書寫方式。即top-bottom-right-left(類似ie私有值tb-rl)
vertical-lr:垂直方向自左而右邊的書寫方式。即top-bottom-left-right
lr-tb:左-右，上-下。物件中的內容在水平方向上從左向右流入。後一行在前一行的下面。所有的字形都是豎直向上的。
tb-rl : 上-下，右-左。物件中的內容在垂直方向上從上向下流入，自右向左。後一豎行在前一豎行的左面。全形字符是豎直向上的，半形字元如拉丁字母或片假名順時針旋轉90度。這種布局是東亞語系通常使用的
text-align:jusify實現文字兩端對齊布局，相容ie
對於text-align
我們再熟悉不過了，可是它有個
justify
屬性，平時很少用到，就鮮為人知了。
justify
是一種文字靠兩邊布局方式，一般應用於書刊雜誌排版；合理運用
text-align:justify
有時會省去很多開發的時間。 使用
text-align:justify
時需要結合另外乙個
ie私有屬性：text-justify:inter-ideograph；
text-justify
語法：text-justify : auto |inter-word | news***** |distribute | distribute-all-lines | inter-ideograph
text-justify
引數auto
：允許瀏覽器使用者**確定使用的兩端對齊法則
；inter-word
：通過增加字之間的空格對齊文字。
該行為是對齊所有文字行最快的方法。它的兩端對齊行為對段落的最後一行無效
；news*****
：通過增加或減少字或字母之間的空格對齊文字。是用於拉丁文本母表兩端對齊的最精確格式
；distribute
：處理空格很像
news*****
，適用於東亞文件。尤其是泰國
；distribute-all-lines
：兩端對齊行的方式與
distribute
相同，也同樣不包含兩段對齊段落的最後一行。
適用於表意字文件
；inter-ideograph
：為表意字文字提供完全兩端對齊。他增加或減少表意字和詞間的空格。
因此我們要把text-align:justify;text-justify:inter-ideograph;
放在一起來相容
ie瀏覽器：
多看看這些**，有助於了解css文字豎排效果。
記筆記是個很好的習慣，有助於學習。希望能幫助到你，
Css實現文字豎排效果
css實現文字豎排效果 詞曰 滾滾長江東逝水,浪花淘盡英雄。是非成敗轉頭空 青山依舊在,幾度夕陽紅。白髮漁樵江渚上,慣看秋月春風。一壺濁酒喜相逢 古今多少事,都付笑談中。話說天下大勢 分久必合，合久必分 週末七國分爭，併入於秦。及秦滅之後，楚 漢分爭，又併入於漢。漢朝自高祖斬白蛇而起義，一統天下。後...
文字豎排版
文字豎排版 如下 文字 梅標清骨，蘭挺幽芳 茶呈雅韻，李謝濃妝 杏嬌疏雨，菊傲嚴霜 水仙冰肌玉骨 牡丹國色天香 玉樹亭亭皆砌 金蓮冉冉池塘 丹桂飄香月窟 芙蓉冷豔寒江 花，天地靈秀之所鍾 清 幽 雅 麗 於其姿色中顯其神骨 豎排發光文字 如下 發光效果文字 我是乙隻蝴蝶 在釋珈的菩提樹下 等你 在雨...
css writing mode文字豎排
writing mode vertical rl text orientation upright letter spacing 8px writing mode 屬性定義了文字在水平或垂直方向上如何排布。語法格式如下 writing mode horizontal tb vertical rl v...