writing-mode未生效主因是元素为inline且非块级/容器；vertical-rl使行从右向左堆叠，vertical-lr反之；需配合text-orientation控制字符朝向，并注意字体与浏览器兼容性。
writing-mode 为什么设了没反应
直接加 writing-mode: vertical-rl 却没生效，大概率是元素默认为 inline（比如 <span></span> 或未设 display 的内联标签），而 writing-mode 对纯 inline 元素的布局影响有限——它真正作用于块级或 flex/grid 容器的**行盒方向**。
实操建议：
- 确保目标元素是
display: block、inline-block或flex/grid容器 - 若用在
<div> 上，一般没问题；若用在 <code><span></span>上，必须显式加display: inline-block - 检查父容器是否设置了
white-space: nowrap或text-overflow等干扰换行/流向的样式 -
writing-mode: vertical-rl：字符从上到下排，每“行”从右往左堆叠（即新行出现在左边）——符合中文传统竖排习惯 -
writing-mode: vertical-lr：字符从上到下排，每“行”从左往右堆叠（新行出现在右边）——更接近日文部分排版或 UI 布局需求 - 注意：
vertical-rl是多数中文字体默认适配的方向，vertical-lr在某些字体下可能字距异常或标点位置错乱 -
writing-mode: vertical-rl; text-orientation: mixed（默认）：汉字直立，拉丁字母/数字/标点顺时针转90° -
writing-mode: vertical-rl; text-orientation: upright：所有字符都不旋转，全部直立——此时英文字母会“瘦高”，需注意可读性 -
text-orientation: sideways：强制所有字符都旋转90°，等效于老式transform: rotate(90deg)，但语义更准确 - 避免依赖竖排实现核心信息传达——重要文案仍建议横向布局 + 视觉模拟
- 用
@supports (writing-mode: vertical-rl)做特性检测，给不支持环境降级为横向+transform - 中文字体声明中优先指定
"Noto Serif CJK SC"或"Source Han Serif"，它们对writing-mode的竖排标点支持比宋体、微软雅黑更可靠
vertical-rl 和 vertical-lr 的区别在哪
两者都让文字纵向排列，但字符顺序和行起始方向相反：
配合 text-orientation 控制单字朝向
仅设 writing-mode 后，英文、数字、标点默认会自动旋转 90°，但汉字保持直立；若想让所有字符都「横着站」（比如做装饰性竖排标题），需加 text-orientation: upright。
常见组合与效果：
兼容性和字体 fallback 要特别注意
Firefox、Chrome、Safari（≥12.1）支持完整，但 IE 完全不支持 writing-mode 的 vertical 值；即使现代浏览器，某些系统字体（如 Windows 的 SimSun）对竖排标点、引号、破折号的定位也不稳定。
实操建议：
竖排不是简单加个属性就完事，字符基线、标点悬挂、全角半角混排时的间隙——这些细节在 writing-mode 下会突然变得敏感。动手前先用真实文案多测几组长度和符号组合。
