writing-mode: vertical-rl 是最可靠竖排方案，但需配合 height/line-height 控制列高、text-orientation 调整字母朝向、text-combine-upright 处理数字，并注意标点位置、换行逻辑及 text-align 含义反转。

writing-mode: vertical-rl 是当前最可靠、语义最清晰的竖排方案，但直接套用常导致文字挤成一列、标点错位、英文旋转异常等问题。关键不在“能不能设”，而在“怎么设才不破布局”。

必须显式设置容器高度或行高

竖排时浏览器默认按“一行”处理内容，writing-mode 不会自动换列——它只是把水平流转为垂直流，而“列高”由容器 height 或 line-height 控制。

• 没设 height 或 max-height：文字全堆在顶部，视觉上像被压缩成一条线
• 设了 height 但没配 line-height：中文字符间距过大或过小，尤其多段落时行距失控
• 响应式场景下建议用 min-height + max-height + overflow-y: auto，避免内容溢出或留白过多

text-orientation 决定英文和数字是否“歪着站”

中文竖排时，汉字天然直立，但拉丁字母默认随文本流旋转90°，变成侧躺状态。要不要让它“站起来”，取决于设计意图：

• text-orientation: mixed（默认）：汉字直立，英文字母/数字旋转——适合传统古籍、日文混排
• text-orientation: upright：强制所有字符直立——适合印章、标题、书法类展示，但英文阅读体验略生硬
• text-orientation: sideways：全部字符侧向排列（即旋转），极少用，仅用于特殊艺术效果

注意：text-orientation 在 Safari 15.4+ 和 Firefox 102+ 才完全稳定，旧版 Safari 可能忽略该声明。

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

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

下载

标点与换行需额外干预

CSS 竖排对中文标点（如，。！？；：）有原生支持，但默认位置在字符右侧（即“列尾”），这在 vertical-rl 下是合理的；可一旦内容含英文标点或混合排版，就容易错位。

• 用 text-combine-upright: all 把连续数字（如“2026”）压成单字宽，避免占满整列高度
• 避免在竖排容器内使用 white-space: nowrap，否则换行逻辑失效，长词会撑破容器
• 若需控制某处强制“断列”，可用 ​（零宽空格）或 ⁠（单词连接符）插入软断点

兼容性兜底不能只靠前缀

IE11 支持 -ms-writing-mode: tb-rl，但它的行为和现代 vertical-rl 不完全等价——比如不支持 text-orientation，且对 flex/grid 布局干扰更大。

• 别依赖自动加前缀工具（如 Autoprefixer）补全 writing-mode，它对 IE 的 tb-rl 适配不完整
• 真正需要兼容 IE 的项目，应改用 transform: rotate(90deg) + 绝对定位方案，并用 @supports (writing-mode: vertical-rl) 进行特性检测切换
• 移动端无需担心：iOS Safari 12.2+、Android Chrome 76+ 全面支持 vertical-rl + mixed

最容易被忽略的是：竖排容器内的 text-align 含义会反转——text-align: right 实际是“对齐到列顶”，left 是“对齐到列底”。这点在调试对齐异常时常常卡住半天。

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