vertical-rl是中文竖排首选，需配合text-orientation:mixed实现汉字直立、西文旋转的可读效果；必须设置height或width以触发换行，避免flex/grid嵌套及direction/unicode-bidi干扰。
vertical-rl 是中文竖排的首选值
直接写 writing-mode: vertical-rl 就能实现传统中文从上到下、从右到左的纵排，它不是视觉旋转，而是语义级排版，支持复制、选中和屏幕阅读器。别用 vertical-lr —— 它在 Firefox 中断词异常，且中文括号、顿号等标点容易错位；也别碰 sideways-lr，它把整行当块旋转，英文保持原样但中文标点不适应，Safari 15.4 以下直接失效。
text-orientation: mixed 必须配对使用
只设 writing-mode 不够，text-orientation: mixed 才是让竖排“可读”的关键：汉字直立，拉丁字母和数字自动顺时针转 90°（如 “Windows 11” 变成竖着的“W”“i”“n”…“1”“1”），括号、引号等标点也按东亚规范适配。禁用 text-orientation: upright——它强制所有字符直立，结果英文单词变成一串无法识别的竖列字母。
容器必须有明确 height 或 width
纵排文本会沿垂直方向延展，浏览器需要一个边界来触发换行和布局计算：
-
height设固定值（如height: 300px）最常用，适合已知内容长度的标题或短文 - 若内容动态，改用
width（如width: 2em），让每“行”最多容纳 2 个字符，配合word-break: keep-all防止西文单词被字母级打断 - 千万别依赖父容器的 flex 或 grid 布局自动撑开——
writing-mode在 flex item 中常被忽略，务必给纵排元素自身设尺寸
避开 direction 和 unicode-bidi 的干扰
即使写了 writing-mode: vertical-rl，如果父级或自身带了 direction: rtl 或 unicode-bidi: bidi-override，中文括号（如「（」和「）」）、阿拉伯数字可能被双向算法重排序，出现右括号在左、数字列倒置等现象。稳妥做法是显式重置：
- 删掉所有不必要的
direction声明，让其保持默认ltr - 加
unicode-bidi: plaintext，关闭 Unicode 双向重排逻辑 - 避免在纵排区域内嵌套
<bdi></bdi>或dir属性
真正难调的不是属性本身，而是这些隐性规则叠加后的表现——比如一段含英文括号的混合文本，在 Safari 和 Chrome 下渲染一致，但在旧版 Firefox 中可能因 unicode-bidi 残留而错位，必须逐层检查 computed styles。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
