CSS 书写方向速查

对照 writing-mode 的各个取值、含义与效果，支持关键词过滤，点击任意取值即可预览竖排/横排效果并复制示例代码，全部在浏览器本地完成。

取值对照表共 5 个取值

快速过滤

直接定位取值

取值	说明

过滤器会同时匹配取值与说明文字，点击表格行可查看效果与示例。

效果预览

文字排布效果预览

横排与竖排

writing-mode

当前取值horizontal-tb

书写方向横排

文字走向横行

兼容性稳定

示例代码

复制后可直接粘贴到样式表中，按需替换选择器。

使用规则

writing-mode 会同时改变文本的排列方向和块级流的生长方向，进而影响宽高与滚动方向。
竖排下 width 与 height 的直觉可能相反，布局时需按「块向」和「行向」理解。
text-orientation 可控制竖排中拉丁字母的朝向，如 upright、mixed。
sideways-rl 与 sideways-lr 属于较新取值，旧版浏览器可能不支持。
该属性可继承，建议在容器上设置后由子元素自然继承。