| 文章簡介：css中可用writing-mode屬性讓文字豎著排版，只需要給文字元素添加“writing-mode:vertical-lr;”、“writing-mode:vertical-rl;”或“writing-mode:tb-rl”樣式即可。 |
有時候網頁中的文字因為特別要求不能橫向顯示，這時候所需要的就是讓文字來豎排顯示，那么，網頁中如何讓文字豎排顯示呢？接下來本篇文章將介紹css實現文字豎排顯示的方法，希望對大家有所幫助。
使用writing-mode屬性
writing-mode 屬性定義了文本在水平或垂直方向上如何排布。
語法：
1 | writing-mode:vertical-rl | vertical-lr | lr-tb | tb-rl
|
參數：
示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 | <!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>
|
效果如下：
或者通過：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 | <!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>
|
或者：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 | <!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>
|
輸出結果：
該文章在 2022/8/24 22:52:58 編輯過
400 186 1886
