css中可用writing-mode屬性讓文字豎起排版,只需要給文字元素加上「writing-mode:vertical-lr;」、「writing-mode:vertical-rl;」或「writing- mode:tb-rl」樣式即可。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
css讓文字垂直的排版的方法:
有時候網頁中的文字因為特別要求不能橫向顯示,這時候所需要的就是讓文字來直排顯示,那麼,網頁中要如何讓文字直排顯示呢?接下來這篇文章將介紹css實作文字直排顯示的方法,希望對大家有幫助。
使用writing-mode屬性
writing-mode 屬性定義了文字在水平或垂直方向上如何排布。
語法:
writing-mode:vertical-rl | vertical-lr | lr-tb | tb-rl
參數:
#vertical-rl
:垂直方向自右而左的書寫方式。即top-bottom-right-left
vertical-lr
:垂直方向內內容由上到下,水平方向從左到右
lr-tb
:從左向右,從上往下;
tb-rl
:從上往下,從右往左。
範例:
<!DOCTYPE html> <html> <head> <title>test</title> <meta charset="UTF-8"> </head> <style> .one { margin: 0 auto; height: 140px; writing-mode: vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/ } </style> <body> <div class="one">好好学习,天天向上。 福如东海,寿比南山。 </div> </body> </html>
效果如下:
#或透過:
<!DOCTYPE html> <html> <head> <title>test</title> <meta charset="UTF-8"> </head> <style> .one { margin: 0 auto; height: 140px; writing-mode: vertical-rl; } </style> <body> <div class="one">好好学习,天天向上。 福如东海,寿比南山。 </div> </body> </html>
或者:
<!DOCTYPE html> <html> <head> <title>test</title> <meta charset="UTF-8"> </head> <style> .one { margin: 0 auto; height: 140px; writing-mode: tb-rl;/*从左向右 从右向左是 writing-mode: vertical-rl;*/ } </style> <body> <div class="one">好好学习,天天向上。 福如东海,寿比南山。 </div> </body> </html>
輸出結果:
更多程式相關知識,請造訪:程式設計影片! !
以上是css怎麼讓文字豎的排版的詳細內容。更多資訊請關注PHP中文網其他相關文章!