writing-mode 是实现 CSS 纵向排版最直接标准方式，需搭配 vertical-rl、text-orientation、direction、text-align 等属性协同使用，并注意容器高度设置、兼容性降级及真机验证。
writing-mode 是实现 CSS 纵向排版最直接、最标准的方式，但不是设了就自动好用——它会改变整个布局流，不配合适当的配套属性，文字会错位、标点跑偏、容器塌陷。
vertical-rl 是中文竖排的默认选择
中文古籍、书法展示、传统出版物排版都要求文字从上到下、从右向左排列，vertical-rl 就是为此设计的：
-
writing-mode: vertical-rl会让块级元素的“行”变成垂直方向，内容从右列开始向左逐列填充 - 必须显式设置容器高度（如
height: 300px），否则高度坍缩为 0 —— 因为竖排后，原本的width变成“行高”，height才是内容延展方向 - 注意：
vertical-lr不适合中文，它会让第一列在最左边，阅读顺序反了，容易被误用
text-orientation 决定单个字符怎么“站”
竖排时，汉字默认直立，但拉丁字母、数字、标点默认横向（即顺时针旋转90°），text-orientation 控制这个行为：
-
text-orientation: mixed（推荐）：汉字/日文/韩文直立，ASCII 字母和数字横向，标点按语种智能处理（如中文句号“。”保持直立，英文句点“.”横向） -
text-orientation: upright：强制所有字符直立——适合书法题字、印章等场景，但英文会变得难以识别 -
text-orientation: sideways：全部横向（即传统横排旋转90°），基本不用
direction 和 text-align 要同步调整
writing-mode: vertical-rl 改变了主轴方向，但 direction 和 text-align 仍按旧逻辑工作，不调就会对齐错乱：
- 加
direction: rtl：让多行文本（即多“列”）从右往左排布，符合中文习惯 -
text-align: right在vertical-rl下实际控制的是“顶部对齐”，text-align: left反而是底部对齐——更可靠的做法是用text-align: start/end，或直接用justify-content+ Flex 布局 - 如果容器内有图标、按钮等内联元素，它们也会被竖排影响，建议用
display: inline-block并单独重置writing-mode: horizontal-tb
小程序和旧浏览器的兼容性陷阱
微信小程序基础库 2.9.0+ 才完整支持 writing-mode 和 text-orientation，iOS Safari 10+、Chrome 48+ 没问题，但 Android WebView 4.4 以下几乎不支持：
- 降级方案不能只靠
transform: rotate(90deg)—— 它会让元素脱离文档流，导致父容器无法自适应高度，且input或textarea无法正常使用 - 真要兼容，得用
@supports (writing-mode: vertical-rl)包裹现代样式，再写一套display: inline-block; transform: rotate(90deg)的 fallback，并手动计算容器宽高 - 小程序里还要注意：
view组件需设style="white-space: normal"，否则换行会被忽略；scroll-view竖排滚动必须设overflow-y: auto，且height不可用百分比（需 rpx 或 px）
真正麻烦的不是写几行 CSS，而是竖排会连锁影响 line-height、padding、margin、flex 布局甚至 JavaScript 获取的 clientHeight —— 每次改一个属性，最好都在真机上验证一次渲染结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
