站長(zhǎng)資訊網(wǎng)
css中可用writing-mode屬性讓文字豎著排版，只需要給文字元素添加“writing-mode:vertical-lr;”、“writing-mode:vertical-rl;”或“writing-mode:tb-rl”樣式即可。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
css讓文字豎的排版的方法：
有時(shí)候網(wǎng)頁(yè)中的文字因?yàn)樘貏e要求不能橫向顯示，這時(shí)候所需要的就是讓文字來(lái)豎排顯示，那么，網(wǎng)頁(yè)中如何讓文字豎排顯示呢？接下來(lái)本篇文章將介紹css實(shí)現(xiàn)文字豎排顯示的方法，希望對(duì)大家有所幫助。
使用writing-mode屬性
writing-mode 屬性定義了文本在水平或垂直方向上如何排布。
語(yǔ)法：
writing-mode:vertical-rl | vertical-lr | lr-tb | tb-rl
參數(shù)：
-
vertical-rl：垂直方向自右而左的書(shū)寫(xiě)方式。即 top-bottom-right-left -
vertical-lr：垂直方向內(nèi)內(nèi)容從上到下，水平方向從左到右 -
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">好好學(xué)習(xí)，天天向上。 福如東海，壽比南山。 </div> </body> </html>
效果如下：
或者通過(guò)：
<!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">好好學(xué)習(xí)，天天向上。 福如東海，壽比南山。 </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">好好學(xué)習(xí)，天天向上。 福如東海，壽比南山。 </div> </body> </html>
輸出結(jié)果：
