writing-mode: vertical-rl 会重定义盒模型逻辑坐标系，使 width 控制视觉高度（文字向下延伸距离）、height 控制视觉宽度（每列水平空间）；省略 width 导致向下溢出，省略 height 使列宽塌缩为单字宽；禁用在 flex/grid 父容器上，需配合 text-orientation: mixed 及逻辑属性如 margin-block-start 和 line-height 固定值使用。
writing-mode: vertical-rl 会翻转盒模型的逻辑坐标系，width 和 height 的语义互换——这不是“文字转了个身”，而是整个布局规则重定义。只设这个属性，90% 的竖排布局都会出错。
vertical-rl 下 width 和 height 到底控制什么？
设 writing-mode: vertical-rl 后，块级容器的主轴变成垂直方向，导致：
-
width控制文字能向下延伸的最大距离（即“视觉高度”），不是水平宽度 -
height控制每列文字占用的水平空间（即“视觉宽度”），不是垂直高度 - 省略
width→ 内容无限向下溢出（尤其overflow: visible时） - 省略
height→ 列宽塌缩为单字最小宽度（如汉字约 14–18px），看起来像一条细线
为什么给 flex 或 grid 容器加 writing-mode 就乱套？
writing-mode 会重载主轴与交叉轴定义，而 flex-direction、justify-content 等仍按原始坐标系解析，结果完全不可控：
-
display: flex; flex-direction: row在vertical-rl下实际表现为“从上到下堆叠” -
justify-content: center变成垂直居中，不是你想要的水平居中 -
align-items: flex-start的 “start” 参照的是block-start（顶部），不是 left - 子项的
width/height语义也同步翻转，但开发者通常没重写
正确做法：不要给 display: flex 或 display: grid 的父容器设 writing-mode；只在纯文本块（如 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>、<div class="text-block">）内使用。
<h3>text-orientation 不设就等于没竖排</h3>
<p><code>writing-mode 只管文本流向，不管字符朝向——真正决定“英数横排、汉字直立”的是 text-orientation：
- 默认
text-orientation: mixed：汉字直立，拉丁字母/数字顺时针转 90°（即“躺倒”） - 要让英文也直立：显式写
text-orientation: upright - 绝对不要用
text-orientation: sideways：它会让汉字也躺倒，彻底违背中文竖排意图
不设 text-orientation，哪怕 writing-mode 正确，英文和数字依然侧躺，视觉断裂严重。
text-align 和 margin-top 这类物理属性还管用吗？
部分管用，但语义已变，容易误判：
-
text-align: right在vertical-rl下对齐到列的顶部（block-start），不是右边 -
margin-top仍作用于物理顶部，但“顶部”在竖排中对应内容起始位置，和预期不一致 - 推荐改用逻辑属性：
margin-block-start替代margin-top，text-align: start替代text-align: left -
direction: ltr在竖排中影响新段落生成位置（左侧追加），不是为了对齐，别滥用它调底部对齐
最易被忽略的点是：line-height 方向已变，它现在控制相邻字之间的垂直间距；若保持 line-height: 1.5，实际字距可能过密，建议用固定值如 line-height: 32px。
