writing-mode: vertical-rl 仅翻转文本流方向，不控制字符朝向，需配 text-orientation: mixed（汉字直立、西文旋转）、显式 height（防塌陷）、white-space: nowrap（防错行）三要素才可用。
writing-mode: vertical-rl 在移动端不是“加了就能用”，而是必须配齐 text-orientation、height、white-space 三要素，否则大概率文字歪斜、容器塌陷或换行错乱。
为什么只写 writing-mode: vertical-rl 就出问题？
该属性只翻转文本流方向，不统一字符朝向：英文、数字、括号默认顺时针旋转 90°，汉字却直立；同时块级容器的 width 和 height 含义互换——height 变成“列高”（即视觉上的文字总长度），width 变成“行长”（即单字宽度）。没设 height 就会塌成一条线。
-
text-orientation: mixed是中英文混排底线配置：汉字直立，西文旋转，但标点行为在 Chrome/Firefox 中不一致（如顿号、破折号可能被当西文旋转） -
text-orientation: upright更稳妥：所有字符强制直立，适合含 API 名、版本号（如v2.1）、缩写（如HTTP）的场景 - 必须显式设置
height（如height: 200px），不能依赖auto或min-height，否则 iOS Safari 和 Android X5 内核直接渲染为 0 高度 -
white-space: nowrap必须加：防止窄屏下短文本意外换行，破坏竖排连续性
微信和旧版 iOS 怎么检测并降级？
微信 Android（尤其 8.0.30 之前）X5 内核基本忽略 writing-mode；iOS 微信取决于系统 WebKit 版本，iPhone 6s 及更早设备大概率不生效。运行时检测比 UA 判断更可靠：
const el = document.querySelector('.vertical-text');
if (getComputedStyle(el).writingMode !== 'vertical-rl') {
el.classList.add('fallback-rotate');
}
降级方案别用图片——可用 transform: rotate(90deg) + overflow: hidden 模拟，但注意 touch 坐标偏移（点击位置需手动校正）；降级后必须重设 width/height：旋转后尺寸逻辑反转，原 height: 200px 要变成 width: 200px。
竖排容器里嵌套 flex 或 grid 会出什么问题？
直接给 display: flex 或 display: grid 的父容器加 writing-mode，会导致主轴定义冲突、子项堆叠错位、justify-content 含义反转（比如 center 变成垂直居中而非水平居中）。
- 若必须嵌套布局，只对纯文本子元素（如
<p></p>、<span></span>）应用writing-mode，父容器保持横排流 -
flex-direction: column在vertical-rl下可实现从上到下排列，但需配合align-items控制横向对齐 - 避免用
text-align: right对齐——它在竖排下实际是顶部对齐；改用text-align: start或margin-block-start
真正麻烦的不是写法本身，而是不同内核对 text-orientation 中标点处理的不一致——比如中文顿号、破折号在某些安卓 WebView 里会被当成西文旋转，而 iOS 上又不转，这种细节只能靠真机实测+兜底 fallback。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
