writing-mode: vertical-rl 是中文竖排标准选择：文字从上到下，行从右到左；需配合 text-orientation: mixed 解决标点与数字方向问题，旧版 Safari 需用 @supports 降级。

writing-mode 属性值选哪个才真竖排

不是所有 writing-mode 值都能让中文竖排“从上到下、从右到左”自然阅读。常见误用是直接写 writing-mode: vertical-lr，结果文字倒着转、标点朝左、数字横着——根本没法读。

• writing-mode: vertical-rl 是中文竖排标准选择：文字从上到下，行从右到左（符合传统排版）
• vertical-lr 适合蒙古文或日文部分场景，中文用它会导致句号、逗号贴左，且阿拉伯数字保持横排，视觉混乱
• sideways-rl 和 sideways-lr 是整行旋转90°，字形不变向，仅用于特殊装饰，别当正经竖排用

竖排后标点和数字为啥还是歪的

单纯设 writing-mode 不够，浏览器默认按 Unicode 方向规则处理标点与数字，导致顿号、引号、括号方向错乱，阿拉伯数字横躺。

• 必须加 text-orientation: mixed：让汉字竖排，标点自动旋转适配（如句号变“。”→“〇”式小圆点），全角标点正常，半角标点也尽量 upright
• 若要强制所有数字/英文字母也竖着写（每个字母独立旋转90°），改用 text-orientation: upright，但注意这会让英文可读性暴跌，慎用
• 别依赖 unicode-bidi: plaintext 来“修复”，它可能破坏嵌套文本方向逻辑，尤其含双向文字（如中英混排+数字）时更易出错

flex 或 grid 容器里竖排文字塌陷或错位

在 display: flex 或 display: grid 的父容器中直接对子元素设 writing-mode: vertical-rl，常出现高度归零、换行异常、对齐失效。

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

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

下载

• flex 容器默认主轴是水平的，竖排文字会试图撑宽而非撑高；解决：给父容器加 flex-direction: column，再让子元素自己竖排
• grid 中若用 align-items: center 垂直居中，竖排文字实际是“横向居中”，视觉上偏右；应改用 justify-items: center（控制行内对齐）
• 竖排元素的 height 不再有意义，改用 width 控制“行长度”，用 min-height 或 line-height 控制单字间距

IE11 和 Safari 旧版本兼容性怎么兜底

writing-mode 在 IE11 支持 -ms-writing-mode: tb-rl（等价于 vertical-rl），但 Safari ≤ 12.1 对 text-orientation 支持极弱，标点几乎不旋转。

• 必须写双前缀：writing-mode: vertical-rl 后紧跟 -ms-writing-mode: tb-rl
• text-orientation: mixed 在 Safari ≤ 12.1 下被忽略，此时建议用 @supports 检测并降级为纯 CSS transform 旋转（transform: rotate(90deg)），但注意这会让整个元素参与流式布局计算，需手动调 width/height
• 不要用 direction: rtl 代替 writing-mode，它只影响 inline 顺序，不改变文字方向，纯属误导

竖排真正难的不是属性本身，而是标点旋转逻辑、中西文混排时的 baseline 对齐、以及旧浏览器里不得不把 layout 当 hack 来凑。写完记得拿真实内容（带括号、数字、破折号的段落）预览三遍，别信 demo 里的纯汉字。

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