CSS 文字竖排

功能

• `writing-mode` 竖排，列从右往左（中文传统）或从左往右
• `text-orientation` 控制数字与拉丁字母是侧躺还是立正
• 字号、列间距、容器高度都可以调，预览实时跟着变
• 高度决定列在哪里折 —— 这是竖排最容易漏掉的一项
• 列间距给的是六档固定倍率，不用猜「1.8 和 2 哪个好看」
• 产物只有一段 CSS 规则，选择器是 `.vertical-text`
• 预览区实时显示，满意后再复制
• 全部在浏览器本地计算，输入的文字不上传

使用方法

1. 在上面的输入框里打几个字
2. 选列的推进方向与数字的朝向
3. 拖字号与高度，看列在哪里折、一屏能放几列
4. 满意后复制 CSS

常见问题

为什么我的文字一直往下排、从来不折列？

因为没有给高度。竖排的换列发生在容器高度用完的时候 —— 高度是 `auto`（或者撑满一个没有高度的父元素）时，一列就永远用不完，于是文字无限往下长。上面的「容器高度」那一项就是干这件事的，给了它就能看到文字折成好几列。真实项目里也一样：竖排容器必须有一个确定的高度（或者由父元素给出确定高度），否则这段 CSS 贴过去仍然是「一条线」。

数字是横躺着的，能改成竖起来吗？

可以，把「数字与拉丁字母」切到立正（`text-orientation: upright`）。两种写法各有适用场景：侧躺（`mixed`）读起来更顺，因为数字与英文词本来就是横向排版的，`2026-09-27` 侧躺过来一眼能认出；立正则更整齐，每一格都严丝合缝，适合做竖排的编号、匾额式排版。中文竖排的通行做法是侧躺。

为什么产物是一段 CSS，而不是一段 HTML？

因为竖排是样式问题，不是结构问题。用 `<br>` 逐字断行也能排出竖排的样子，但那会把文本拆碎 —— 用户选中之后复制出来是一个字一行，搜索与朗读也会跟着坏掉。`writing-mode` 让浏览器在渲染阶段处理方向，文本本身保持完整可复制、可搜索、可被屏幕阅读器正常朗读。