writing-mode是实现竖排文字最可靠、唯一符合标准且无需hack的方案，必须用vertical-rl配合text-orientation: mixed，并注意容器尺寸、内联元素处理及移动端touch适配。
用 writing-mode 实现竖排文字最可靠
现代浏览器中，writing-mode 是唯一符合标准、无需 hack 的竖排方案。它原生支持中文、日文等垂直书写场景，且能配合 text-orientation 控制字符方向。
常见错误是直接套用旧式 transform: rotate(90deg) —— 这会让文字不可选、无法复制、屏幕阅读器读错，而且换行逻辑全乱。
-
writing-mode: vertical-rl（从右到左竖排，中文传统排版）或vertical-lr（从左到右竖排，多用于日文） - 搭配
text-orientation: mixed让拉丁字母自动旋转，汉字保持 upright；用text-orientation: upright强制所有字都直立 - 注意：IE10+ 支持
writing-mode，但 IE 对text-orientation支持有限，若需兼容 IE，得降级处理
竖排时换行和对齐容易出问题
竖排后，white-space 和 text-align 的行为会变化：text-align 控制的是“行首”对齐（即顶部对齐），不是左右对齐；white-space: normal 仍按字符断行，但断点逻辑和横排不同。
- 避免用
word-break: break-all强制断字——竖排中文不该“断字”，应优先用overflow-wrap: break-word - 想让标题居中显示？用
text-align: center是对的，但它居中的是每行的“顶部”，视觉上就是整段文字在容器中垂直居中 - 如果内容含英文或数字，检查是否因
text-orientation设置不当导致字母倒置或挤在一起
内联元素竖排要额外包裹
span、strong 等内联元素默认不响应 writing-mode，必须先设为 display: inline-block 或 block 才生效。
- 错误写法：
<span style="writing-mode: vertical-rl">文字</span>→ 无效 - 正确写法：
<span style="writing-mode: vertical-rl; display: inline-block">文字</span> - 更稳妥的做法是用
div或p包一层，再统一设置writing-mode，避免逐个修正内联样式
移动端竖排要注意 touch 行为偏移
在 iOS Safari 和部分安卓浏览器中，竖排容器若高度较小（比如仅一行文字），input 或 textarea 聚焦时软键盘可能遮挡内容，且光标定位不准。
- 给竖排容器加
min-height: 1.5em防止塌陷，有助于触控区域识别 - 避免在竖排区域内嵌套可编辑元素；如必须支持输入，建议切换回横排模式（用媒体查询 + class 切换）
- 测试时真机必测：模拟器常忽略竖排下的 touch 坐标映射偏差
writing-mode 并不难，但细节都在字体渲染、交互反馈和跨端一致性里。尤其当竖排文字混有标点、括号、西文单位时，text-orientation 的取值稍有偏差，整行就显得别扭。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
