Css 简明教程
CSS - writing-mode Property
CSS writing-mode 属性用于指定元素中文本内容流动的方向。它指定文本应水平显示还是垂直显示。
它在处理非拉丁文字的文本方向（如中文、日语和阿拉伯语）以及创建创意且在视觉上引人注目的布局时特别有用。
Possible Values
-
horizontal-tb − 默认值。它将文本设置为以水平书写模式布局，其中文本从左到右和从上到下流动，如同大多数西方语言。
-
vertical-rl − 此值指定从右到左的垂直书写模式，通常用于中文、日文或韩文等文字。文本垂直流动，从右到左依次进行。
-
vertical-lr − 类似于 vertical-rl ，此值也代表一种垂直书写模式，但文本从左到右流动，蒙古文等文字使用此模式。
-
sideways-rl − 此值指定从上到下的垂直文本流动，但将文本从右到左排放。此值用于蒙古文或某些形式的垂直日文文本等垂直文字，其中字符顺时针旋转 90 度且从右到左阅读。
-
sideways-lr − 此值指定从下到上的垂直文本流动，但将文本从左到右排放。
下表显示了不推荐使用的书写模式及其对应方式：
Deprecated Value |
Equivalent Value |
lr |
horizontal-tb |
rl |
horizontal-tb |
lr-tb |
horizontal-tb |
tb |
vertical-lr |
tb-lr |
vertical-lr |
tb-rl |
vertical-rl |
DOM Syntax
object.style.writingMode = "horizontal-tb|vertical-rl|vertical-lr|sideways-rl|sideways-lr";CSS writing-mode - horizontal-tb Value
以下示例演示了将 writing-mode 属性设置为值 horizontal-tb 的情况，其中文本从左到右、从上到下读取 −
<html>
<head>
<style>
.box {
width: 250px;
background-color: pink;
writing-mode: horizontal-tb;
}
</style>
</head>
<body>
<h2>CSS writing-mode: horizontal-tb</h2>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>CSS writing-mode - vertical-rl Value
以下示例演示了将 writing-mode 属性设置为值 vertical-rl 的情况，其中文本从右向左、从上到下读取 −
<html>
<head>
<style>
.box {
height: 250px;
background-color: pink;
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<h2>CSS writing-mode: vertical-rl</h2>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>CSS writing-mode - vertical-lr Value
以下示例演示了将 writing-mode 属性设置为值 vertical-rl 的情况，其中文本从左到右、从上到下读取： −
<html>
<head>
<style>
.box {
height: 250px;
background-color: pink;
writing-mode: vertical-lr;
}
</style>
</head>
<body>
<h2>CSS writing-mode: vertical-lr</h2>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</body>
</html>CSS writing-mode - sideways-rl Value
以下示例演示了将 writing-mode 属性设置为值 sideways-rl 的情况，其中文本从上到下垂直读取，并且字符从右到左排列 −
<html>
<head>
<style>
.box {
height: 300px;
background-color: pink;
writing-mode: sideways-rl;
}
</style>
</head>
<body>
<h2>CSS writing-mode: sideways-rl - This example is only supported by Firefox Browser.</h2>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</body>
</html>CSS writing-mode - sideways-lr Value
以下示例演示了将 writing-mode 属性设置为值 sideways-lr 的情况，其中文本从上到下垂直读取，并且字符从左到右排列 −
<html>
<head>
<style>
.box {
height: 300px;
background-color: pink;
writing-mode: sideways-lr;
}
</style>
</head>
<body>
<h2>CSS writing-mode: sideways-lr - This example is only supported by Firefox Browser.</h2>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</body>
</html>CSS writing-mode - Asthetic Use (english Language)
值 vertical-lr 和 vertical-rl 可用于英语语言的审美效果，如下示例所示：
<html>
<head>
<style>
.mainbox{
max-width: 750px;
position: relative;
padding-left: 80px;
padding-top: 50px;
}
.box {
height: 250px;
background-color: pink;
}
h2 {
padding-top: 70px;
writing-mode: vertical-rl;
position: absolute;
left: 0;
top: 0;
line-height: 1;
color: lightgreen;
font-size: 40px;
font-weight: 800;
}
</style>
</head>
<body>
<div class="mainbox">
<h2>TutorialsPoint</h2>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</body>
</html>