css怎么讓文字豎的排版
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怎么讓文字豎的排版的詳細內容，更多請關注有啊網站百科其它相關文章！
標簽：css
- 喜歡（11）
- 不喜歡（1）
聲明：本文由會員轉載自互聯網、僅供學習交流，內容版權歸原作者所有，如涉作品、版權或其它疑問請聯系本站管理員刪除。
火車太堵
電影獵手
555
豌豆
有啊京券網
有啊淘券網
極簡插件
RedHelper
壹伴
百分投簡歷
