vertical-rl是中文竖排唯一合理选择，需配text-orientation:mixed；vertical-lr仅适用于蒙古文，误用会导致标点错乱、阅读节奏破坏；writing-mode只控文本流方向，字符朝向由text-orientation决定。

vertical-rl 是中文竖排唯一合理选择，不是“可选之一”

中文、日文、繁体字场景下，writing-mode: vertical-rl 才让文本从上到下、行从右到左流动，符合传统印刷逻辑。浏览器渲染时，vertical-rl 的 block-start 对应顶部，inline-start 对应右侧，所以第一行自然出现在容器最右边。

vertical-lr 只适用于蒙古文等极少数语言，强行用于中文会破坏阅读节奏：文字堆在左上角、换行后向左延伸、标点位置错乱 → 这不是 bug，是规范行为。

别被 “lr” 缩写误导：它指 inline direction（行方向），不是“看起来从左开始”。检查错误现象，基本能快速定位是否误用了 vertical-lr。

text-orientation 必须显式设置，否则中英文混排基线错乱

writing-mode 只管块级流向，字符怎么“站”由 text-orientation 决定。默认 mixed 会让英文字母顺时针转 90°，汉字保持直立，结果就是字母“躺平”、汉字“立正”，基线对不齐。

• text-orientation: mixed：推荐，多数中文竖排网站用这个，接近印刷效果
• text-orientation: upright：所有字符都直立，适合按钮、标签等需保证英文可读性的场景
• 绝对不要用 text-orientation: sideways —— 它会让汉字也躺倒，彻底违背中文竖排意图

注意：text-orientation 只在 writing-mode 非 horizontal-tb 时生效。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

Grid 容器里设 writing-mode 会翻转对齐语义，别直接套在父容器上

给 display: grid 的父容器加 writing-mode: vertical-rl，不会让子项自动竖排，反而会反转 justify-items 和 align-items 的左右/上下含义：

• justify-items: center 原本控制列内水平居中，现在变成“控制行内居中”，视觉上偏右
• grid-template-columns 定义不受影响，但内容在轨道中的对齐逻辑已变
• 子项若本身是文本块，仍需单独加 writing-mode 和 text-orientation

正确做法：只对纯文本子元素（如

）应用 writing-mode；Grid 仅负责布局结构，不接管文本流方向。

尺寸属性含义对调，width/height 行为完全反直觉

设了 writing-mode: vertical-rl 后，CSS 中的“宽高概念对调”：

• 原来设的 width 实际控制的是列高（即每行多高）
• height 控制的是行数（即总共几列）
• height: auto 失效，文字极易塌成一条细线，必须显式设 height 或 max-height

容易被忽略的一点：Grid 轨道尺寸（如 grid-template-rows: 1fr 2fr）仍按物理方向计算，但其内部文本块的 width/height 已逻辑翻转 —— 这个错位是调试中最常卡住的地方。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！