writing-mode: vertical-rl 是实现中文竖排的唯一标准方案，需配合 text-orientation: mixed 控制字符朝向，避免使用 transform 或拆字 flex 等破坏语义与可访问性的权宜之计。
用 writing-mode 实现竖排文字（最直接）
现代浏览器都支持 writing-mode，它是专为控制文本流方向设计的 CSS 属性。设为 vertical-rl 就能让文字从上到下、从右到左竖排——这是中文竖排的标准流向。
实操建议：
- 给需要竖排的元素（比如
<p>或<span>）加样式：writing-mode: vertical-rl; - 注意默认行内元素不会自动换行，若内容过长需配合
white-space: normal;或设宽高 - 英文或数字会自动顺时针旋转 90°，符合传统竖排习惯；中文字符保持 upright（不旋转）
- IE11 也支持，但 IE10 及更早版本需用
-ms-writing-mode: tb-rl;（已基本可忽略）
遇到文字被“压扁”或字间距异常？检查 text-orientation
writing-mode 控制整体流向，text-orientation 决定单个字符是否旋转。如果发现汉字歪斜、英文字母横躺、标点错位，大概率是这个属性没设对。
常见组合：
立即学习“前端免费学习笔记（深入）”；
- 中文竖排正文：加
text-orientation: mixed;（汉字 upright，拉丁字母/数字旋转） - 纯数字列（如页码）：可用
text-orientation: upright;强制不旋转 - 不写
text-orientation时，部分浏览器（如旧版 Safari）可能默认用sideways，导致所有字都侧躺
用 transform: rotate() 是错误解法
有人试过给每个字套 <span> 然后用 transform: rotate(90deg)，这会导致几个实际问题：
- 文字无法被正常选中和复制（浏览器识别为图形变换，不是文本流）
- 屏幕阅读器读不出来，无障碍失效
- 换行逻辑彻底崩坏，宽度高度计算混乱
- 字号缩放、字体抗锯齿表现异常
除非是装饰性标题且完全不需要交互，否则别碰 transform 做竖排。
兼容老浏览器或特殊排版需求？考虑 flex + 单字 <span>
极少数场景（比如必须支持 IE9，或要让每个字单独动画），才退而求其次用 DOM 拆分 + flex 布局：
<div class="vertical-text"> <span>文</span><span>字</span><span>竖</span><span>排</span> </div>
CSS：
.vertical-text {
display: flex;
flex-direction: column;
}
.vertical-text span {
line-height: 1;
}
但要注意：
- 必须手动拆字（JS 处理或服务端预处理），纯 HTML 写死不灵活
- 标点符号位置、避头尾规则（如句号不能在行首）全靠手动调，无法自动
- 搜索、复制、打印效果差，仅限静态展示
真正做出版级竖排时，writing-mode + text-orientation 是唯一靠谱路径；其他方案都是临时补丁，容易在换字体、改字号、加响应式时突然崩掉。
