CSS - writing-mode 属性

上一页
下一页

CSS writing-mode 属性用于指定文本内容在元素内的流动方向。它指定文本是水平显示还是垂直显示。

它对于处理非拉丁文字（如中文、日文和阿拉伯文）中的文本方向以及创建创意和视觉上有趣的布局特别有用。

可能的值

  • horizontal-tb − 默认值。它设置文本以水平书写模式布局，其中文本从左到右和从上到动，就像在大多数西方语言中一样。
  • vertical-rl − 此值指定从右到左的垂直书写模式，通常用于中文、日文或韩文等脚本。文本垂直流动，从右侧开始，然后向左移动。
  • vertical-lr − 与vertical-rl类似，此值也表示垂直书写模式，但文本从左向右流动，这在蒙古文等脚本中使用。
  • sideways-rl − 此值指定从上到下的垂直文本流，但将文本从右到左放置。此值用于垂直脚本（如蒙古语）或某些形式的垂直日语文本，其中字符顺时针旋转 90 度并从右到左阅读。
  • sideways-lr − 此值指定从下到上的垂直文本流，但将文本从左到右放置。
CSS 中的 lr、lr-tb、rl、tb、tb-lr 和 tb-rl 编写模式已弃用，不应再使用。相反，您应该使用 horizontal-tb 或 vertical-lr 写入模式。

下表显示了已弃用的书写模式及其等效模式：

已弃用的值 等值
lr horizontal-tb
rl horizontal-tb
lr-tb horizontal-tb
tb vertical-lr
tb-lr vertical-lr
tb-rl vertical-rl

适用于

除表格行组、表格列组、表格行和表格列之外的所有 HTML 元素。

DOM 语法


object.style.writingMode = "horizontal-tb|vertical-rl|vertical-lr|sideways-rl|sideways-lr";

CSS 写入模式 - horizontal-tb 值

以下示例演示了将 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 值

以下示例演示了设置为值 vertical-rl 的 writing-mode 属性，其中文本从右到左、从上到下读取 -


<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 写作模式 - vertical-lr 值

以下示例演示了将 writing-mode 属性设置为 value 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 编写模式 - sideways-rl 值

sideways-rl 值仅受 Firefox 浏览器支持。

以下示例演示了将 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 写作模式 - sideways-lr 值

sideways-lr 值仅受 Firefox 浏览器支持。

以下示例演示了将 writing-mode 属性设置为 value 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 （英语）

值 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>

CSS writing-mode - 相关属性

以下是与写作模式相关的 CSS 属性列表：

属性 值
display 设置文本的方向。
unicode-bidi 确定文档中双向文本的行为。
text-orientation 设置行中字符的方向。
text-combine-upright 将多个排版字符单元合并到单个排版字符单元的空间中。
打印本页
上一页
下一页