writing-mode 是切换文本流方向的布局机制而非视觉技巧；vertical-rl 与 vertical-lr 区别在于竖排列序，需配合 text-orientation、line-height、height 等显式设置以避免错乱。
writing-mode 不是用来“让文字看起来竖着”的视觉 trick，而是真正切换文本流方向的布局机制。直接写 writing-mode: vertical-rl 很可能让整段文字只显示一行、标点堆在右侧、行高失控——问题不在属性本身，而在它会连带翻转盒模型和对齐逻辑。
vertical-rl 和 vertical-lr 的实际行为差异
两者都让文字垂直排列，但默认书写顺序相反：vertical-rl 从右向左排竖列（符合中文古籍习惯），vertical-lr 从左向右排（类似蒙古文或某些 UI 标签）。别只看名字，关键看内容流向是否匹配阅读习惯。
-
vertical-rl下，text-align: start对应顶部对齐，text-align: end对应底部对齐，left/right失效 -
vertical-lr下，全角标点（如“。”“，”）可能不自动旋转，拉丁字符默认保持水平，容易出现“Windows 11”横在竖列中间的断裂感 - 若含英文单词（如“JavaScript”），建议加
word-break: keep-all，否则浏览器可能在字母间断行
line-height 和 height 必须显式设置
writing-mode 切换后，主轴变成垂直方向，line-height 不再控制“行间距”，而控制“列间距”；同时，元素的 width 表现为垂直方向高度，height 表现为水平方向宽度。浏览器不会自动按新方向推算尺寸。
- 不设
line-height：浏览器可能用块级容器高度作为默认行高，导致文字挤成一团或大片空白 - 不设
height或min-height：父容器若无明确高度，内容可能被截断或撑不开 - 推荐写法：
line-height: 1.6+height: auto（内容自适应）或height: fit-content（需注意兼容性）
text-orientation 决定英文字母和数字怎么摆
默认情况下，数字和拉丁字母在 vertical-rl 中会顺时针旋转 90°，但“2024”或“API”这样读起来就费劲。这时靠 text-orientation 控制：
-
text-orientation: mixed：汉字竖排，英数保持水平（最常用，可读性好） -
text-orientation: upright：所有字符都严格竖向，包括“W”“5”，适合纯装饰场景，但牺牲可读性 -
text-orientation: sideways：所有字符统一旋转，基本不用 - 注意：
text-orientation在 Safari 中支持不稳定，iOS 16+ 才较可靠
兼容性和前缀不是“锦上添花”，而是上线前提
虽然现代 Chrome/Firefox/Edge 都支持标准 writing-mode，但如果你的项目仍需支持旧版 Safari（≤15.6）或部分安卓 WebView，-webkit-writing-mode 和 -ms-writing-mode 就不是可选项。
-
-ms-writing-mode: tb-rl是 IE 旧语法，等价于vertical-rl，但仅 IE 10–11 支持 -
-webkit-writing-mode: vertical-rl在 Safari ≤15.4 中是必需的 - 不要只写一个值，推荐组合写法：
writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; - 用
@supports (writing-mode: vertical-rl)做渐进增强，避免降级时样式崩坏
height 已经不是原来那个 height —— 这类隐性依赖，最容易在线上环境突然暴露。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
