CSS参考手册
写入模型 | Writing Modes
写入模型 | writing-mode
writing-mode
CSS属性定义文本行是否水平或垂直布置以及块扩展的方向。
/* 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
——内容按从左到右水平从上到下垂直流动。下一条水平线位于上一条线的下方。
vertical-rl
——内容按从上到下垂直流动,水平从右到左。下一条垂直线位于前一行的左侧。
vertical-lr
——内容按从上到下垂直流动,水平从左到右。下一条垂直线位于上一行的右侧。
sideways-rl
——内容按从上到下垂直流动,所有的字形,甚至是垂直字形的字形都被设置在右侧。sideways-lr
——内容按从上到下垂直流动,所有的字形,甚至垂直的字形,都被放在左侧。
lr
——已弃用,但SVG1文档除外。对于CSS,使用horizontal-tb
。
lr-tb
——已弃用,但SVG1文档除外。对于CSS,使用horizontal-tb
。
rl
——已弃用,但SVG1文档除外。对于CSS,使用horizontal-tb
。
tb
——已弃用,但SVG1文档除外。对于CSS,使用vertical-lr
。
tb-rl
——已弃用,但SVG1文档除外。对于CSS,使用vertical-rl
。
形式语法
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
写入模型 | Writing Modes相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。