写入模型 | writing-mode

writing-mode

writing-modeCSS属性定义文本行是否水平或垂直布置以及块扩展的方向。

/* Keyword values */
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;

/* Global values */
writing-mode: inherit;
writing-mode: initial;
writing-mode: unset;

语法

该属性指定块流向，即块级别容器堆叠的方向，以及内联级别内容在块容器内流动的方向。因此，writing-mode属性也决定了块级内容的排序。

Initial value	horizontal-tb
Applies to	all elements except table row groups, table column groups, table rows, and table columns
Inherited	yes
Media	visual
Computed value	as specified
Animation type	discrete
Canonical order	the unique non-ambiguous order defined by the formal grammar

可能值

horizontal-tb——内容按从左到右水平从上到下垂直流动。下一条水平线位于上一条线的下方。

形式语法

horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr

实例

实际结果

规范

Specification	Status	Comment
CSS Writing Modes Module Level 3The definition of 'writing-mode' in that specification.	Candidate Recommendation	Initial definition
UnknownThe definition of 'writing-mode' in that specification.	Unknown	Add sideways-lr and sideways-rl

浏览器兼容性

Feature	Chrome	Edge	Firefox	Internet Explorer (defunct)	Opera	Safari
Basic support	8-webkit (Yes)	(Yes)-webkit (Yes)	41 (41)1	9-ms2	15-webkit	5.1-webkit
lr	48 (uprefixed)	(Yes)	43 (43)	9-ms2	(Yes)	?

Feature	Android	Android Webview	Chrome for Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	3-webkit	(Yes)	47-webkit (Yes)	(Yes)-webkit (Yes)	41.0 (41) 1	?	?	5.1 -webkit
SVG 1.1 values lr, lr-tb, rl, tb, tb-rl	?	48.0 (uprefixed)	48.0 (uprefixed)	(Yes)	43.0 (43)	?	?	?
sideways-rl,sideways-lr	No support4	No support	No support	No support	?	?	?	?
vertical-lr	vertical-rl	No support4	No support	No support	No support	?	?	?

另见

SVG writing-mode attribute

direction

unicode-bidi

text-orientation

text-combine-upright