如何通过CSS writing-mode 实现移动端竖排文字排版？-css教程-PHP中文网

仅写 writing-mode: vertical-rl 必然失效，因它只翻转文本流而不控制字符朝向，导致中英文混排歪斜、容器塌陷；必须配合 text-orientation: mixed、显式 height、white-space: nowrap 等约束，并针对微信和旧 ios 降级处理。

如何通过css writing-mode 实现移动端竖排文字排版？

移动端用 writing-mode: vertical-rl 能实现竖排，但不加配套约束几乎必然失效——文字歪斜、容器塌陷、微信里直接变横排是常态。

为什么只写 `writing-mode: vertical-rl` 会出问题？

它只翻转文本流方向，不控制字符朝向：英文字母和数字默认顺时针转 90°，汉字却直立；同时块级盒模型语义反转——height 变成“视觉宽度”，width 反而变成“列高”。没设 height 就会塌成一条线。

text-orientation: mixed 必须加，否则中英文混排时西文正立、汉字躺倒
height 必须显式设置（如 height: 200px），不能依赖 auto 或 min-height
white-space: nowrap 推荐加，防止窄屏下短文本意外换行

微信和旧版 iOS 怎么检测并降级？

微信 Android（尤其 8.0.30 之前）X5 内核基本忽略 writing-mode；iOS 微信表现取决于系统 WebKit 版本，iPhone 6s 及更早设备大概率不生效。

运行时检测：getComputedStyle(el).writingMode !== 'vertical-rl' 时触发降级
别用图片降级——可用 transform: rotate(90deg) + overflow: hidden 模拟，但需重设 width/height（旋转后尺寸逻辑反转）
注意 touch 坐标偏移，降级后需手动修正事件监听区域

竖排容器里嵌套 flex/grid 会怎样？

直接给 display: flex 或 display: grid 的父容器加 writing-mode，会导致主轴定义冲突、子项堆叠错位、justify-content 含义反转。

Wechat MP Article Stats Comments Suite - 微信公众号管理套件

公众号运营：文章发布至草稿、样式封面、评论与用户管理、数据统计等。用户要求将 Markdown 发送到公众号草稿、查看阅读量统计或类似后台操作时，使用本技能。

下载

避免在 flex/grid 容器上设 writing-mode
只对纯文本子元素（如 <p></p> 或 <span></span>）应用该属性
对齐改用逻辑属性：margin-block-start 替 margin-top，text-align: start 替 text-align: left

字体 fallback 和数字标点怎么处理才不崩？

不是所有中文字体都支持竖排渲染：-apple-system 在竖排时可能压扁标点，某些字体让破折号——、省略号…歪斜或错位。

font-family 必须写全："PingFang SC", "Heiti SC", "Microsoft YaHei", sans-serif
纯数字串（如 2024）会整体躺倒，想正立就得单独包一层并设 text-orientation: upright
绝对不要用 text-orientation: sideways——它会让汉字也躺倒

真正麻烦的不是写几行 CSS，而是不同 WebView 对 writing-mode 的实现差异太碎：同一段代码，在 iOS Safari 16、微信 iOS、微信 Android、Chrome for Android 上表现可能完全不同。真要上线，必须每种环境都拿真机跑一遍，不能只靠模拟器或桌面。