css怎么讓文字豎的排版
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
css讓文字豎的排版的方法：
有時候網(wǎng)頁中的文字因為特別要求不能橫向顯示，這時候所需要的就是讓文字來豎排顯示，那么，網(wǎng)頁中如何讓文字豎排顯示呢？接下來本篇文章將介紹css實現(xiàn)文字豎排顯示的方法，希望對大家有所幫助。
使用writing-mode屬性
立即學(xué)習(xí)“前端免費學(xué)習(xí)筆記（深入）”；
writing-mode 屬性定義了文本在水平或垂直方向上如何排布。
語法：
writing-mode:vertical-rl | vertical-lr | lr-tb | tb-rl
參數(shù)：
vertical-rl：垂直方向自右而左的書寫方式。即 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>效果如下：
<!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é)果：
更多編程相關(guān)知識，請訪問：編程視頻！！
以上就是css怎么讓文字豎的排版的詳細內(nèi)容，更多請關(guān)注有啊網(wǎng)站百科其它相關(guān)文章！
相關(guān)閱讀：
2、學(xué)習(xí)CSS框架必不可少：從基礎(chǔ)開始掌握CSS框架的使用方法
3、CSS3的新特性一覽：如何使用CSS3實現(xiàn)濾鏡效果
4、CSS3的新特性一覽：如何使用CSS3實現(xiàn)水平居中布局
- 喜歡（11）
- 不喜歡（1）
火車太堵
電影獵手
555
豌豆
有啊京券網(wǎng)
有啊淘券網(wǎng)
極簡插件
RedHelper
壹伴
百分投簡歷
