前端Wiki/词条/writing-mode 竖排文字

writing-mode 竖排文字

定义控制文字的书写方向：横排（默认）或竖排（上到下、右到左等）

中文排版里竖排非常实用：horizontal-tb 是默认从上到下的横排；vertical-rl 是「从右到左、从上到下」的传统竖排；vertical-lr 则是「从左到右」的竖排。古诗、全屏封面、导航侧栏用 vertical-rl 一行搞定，不用 JS 逐字拆分。

配合 text-orientation: upright 可以让竖排里的英文/数字也立起来（默认它们会横着躺）。侧栏导航竖排文字 + 文字旋转是常见海报式布局。

vertical-rl：从右到左、从上到下的传统竖排
text-orientation: upright 让竖排中的西文也立起来
竖排后宽度收窄，注意容器尺寸与对齐方式

HTML

<style>
  .v { writing-mode: vertical-rl; height: 180px;
       letter-spacing: 4px; padding: 10px; border-left: 2px solid #4a9eff; }
</style>
<p class="v">竖排文字：从右向左、从上向下</p>

⚠ 常见误区

以为竖排就是 rotate(90deg)——writing-mode 是语义排版，文字可选可读
忘了 text-orientation，竖排里英文数字横躺影响美观
竖排容器仍按横排宽度撑开，导致布局错位

🔗 相关词条文本属性 transform 2D 变换