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