古時候的書籍裡面文字的書寫方式都是從上到下從右向左書寫的，我們可不可以在網頁上實現這種文字排版效果，雖然現在豎排在網頁上用的比較的少，但是我們可以在我們自己的個人**或者部落格介紹頁面用豎排來排版，使網頁樣式看起來更加的豐富和復古！
通過一些嘗試我找到了如下3中方式在網頁上豎排文字的方法，各有各的缺點和優點，下面我們就來看看具體的方法和實現效果吧！
實現原理：把一短話的每一句放在乙個div中，設定div的寬度和要顯示的字型的大小一樣（div的高度=字數×字型大小）,div就變成了乙個豎條每一行就只能顯示乙個文字，第二個文字就會被擠到下一行，然後把div的float設定為right向右浮動排列。就達到了一首詩的豎排顯示。
**實現:
愛蓮說周 敦 頤
水陸草木之花
可愛者甚蕃
晉陶淵明獨愛菊
自李唐來
世人甚愛牡丹
予獨愛蓮之出淤泥而不染
濯清漣而不妖
中通外直
不蔓不枝
香遠益清
亭亭淨植
可遠觀而不可褻玩焉
予謂菊花之隱逸者也
牡丹花之富貴者也
蓮花之君子者也
噫菊之愛
陶後鮮有聞
蓮之愛
同予者何人
牡丹之愛
宜乎眾矣
!(
通過float的方式實現文字豎排的demo
這種方式的優缺點：實現原理：把一段話的每乙個字放在乙個span標籤中(文字比較多可以通過js生成span)，然後把這些span標籤放在乙個大的div容器中，將容器div順時針旋轉90度，然後將容器中的span逆時針旋轉90度，經過兩次旋轉之後就達到了豎排文字的需求。優點：網頁文件的書寫和我們平時正常書寫網頁時候一樣，可以為每一行設定不同的顯示樣式。
缺點：如果一行文字比較長，沒有辦法換行~
**實現：
愛蓮說
通過transform:rotate方式實現文字豎排的demo
這種方式的優缺點：writing-mode直譯過來就是書寫模式，它是為了控制文字布局而產生的，換句話說它就是用來實現文字豎排的，只不過文字豎排我們平時用的少，所以這個css屬性也不常見，發現這個屬性之前我還是在用一些其它方式（前兩中方法）實現文字的豎排。優點：一大段文字也可以實現自動換行。 缺點：在具體位置實現換行控制比較麻煩，而且每個字寫都要用乙個span標籤來包住。
writing-mode的屬性比較多，詳細請看mdn,文字豎排使用到的屬性是writing-mode:vertical-rl從右向左豎排,writing-mode:vertical-lr從左向右豎排
**實現
水調歌頭蘇 軾明月幾時有
把酒問青天
不知天上宮闕
今夕是何年
我欲乘風歸去
惟恐瓊樓玉宇
高處不勝寒
起舞弄清影
何似在人間
轉朱閣低綺戶
照無眠不應有恨
何事長向別時圓
人有悲歡離合
月有陰晴圓缺
此事古難全
但願人長久
千里共蟬娟
水調歌頭
蘇 軾明月幾時有
把酒問青天
不知天上宮闕
今夕是何年
我欲乘風歸去
惟恐瓊樓玉宇
高處不勝寒
起舞弄清影
何似在人間
轉朱閣低綺戶
照無眠不應有恨
何事長向別時圓
人有悲歡離合
月有陰晴圓缺
此事古難全
但願人長久
千里共蟬娟
通過write-mode方式實現文字豎排的demo
這種方式的優缺點：注意事項：write-mode會改變一些原有的規則，如我們隊上面的content1中的p設定行高，那麼行高會變成左右行距離而不是上下行距。優點：實現文字豎排的方式比較的方便和優雅 缺點：語法比較多，而且有兩套不同的規範（ie和css3）！
本文如有誤，請不吝賜教！
css屬性讓網頁文字實現豎排的幾種方法
以下幾種都是用樣式style裡的屬性 1.layout flow horizontal vertical ideographic 引數 horizontal 物件中的內容自左邊流入。下一行在前一行下面。這個值適於拉丁語系 vertical ideographic 物件中的內容自上而下流入，下一行在前...
在網頁上如何實現文字豎排
在css中，我們的文字排版通常都是從左向右，從上往下。那麼，如果我們要實現頁面文字豎排，應該怎樣設定呢？為了解決這個問題，下面課課家 將為大家介紹實現文字豎排的方法，有興趣的朋友不妨參考一下。一 writing mode語法 要實現頁面文字豎排，我們需要使用writing mode屬性，下面我們一起...
用CSS讓網頁文字豎排
1.writing mode 設定物件書寫方向 語法 writing mode lr tb tb rl 引數 lr tb 從左向右，從上往下 tb rl 從上往下，從右向左 示例 div 2.text align 設定物件中文字的對齊方式 語法 text align left right cente...