如何利用CSS write-mode实现在移动端的纵向文字排版？-css教程-PHP中文网

writing-mode: vertical-rl 在移动端需配套设置才能正常显示：必须加 text-orientation: upright 或 mixed、显式 height、white-space: nowrap，并避免 flex/grid 直接应用，降级用 transform: rotate(90deg) 且重设宽高。

如何利用css write-mode实现在移动端的纵向文字排版？

writing-mode: vertical-rl 在移动端能用，但不加配套控制几乎必然错位或塌陷——不是属性本身失效，而是盒模型、字符朝向、渲染引擎三者共同作用的结果。

为什么只写 `writing-mode: vertical-rl` 文字会歪或塌陷？

该属性只翻转文本流方向，不统一字符朝向：英文、数字、括号默认顺时针旋转 90°，汉字却直立；同时块级容器的 width 和 height 含义互换——height 变成“列高”（即视觉上的文字总长度），width 变成“行长”（即单字宽度）。没设 height 就会塌成一条线。

text-orientation: mixed 是中英文混排底线配置：汉字直立，西文旋转，但标点行为在 Chrome/Firefox 中不一致（如顿号、破折号可能被当西文旋转）
text-orientation: upright 更稳妥：所有字符强制直立，适合含 API 名、版本号（如 v2.1）、缩写（如 HTTP）的场景
必须显式设置 height（如 height: 200px），不能依赖 auto 或 min-height，否则 iOS Safari 和 Android X5 内核直接渲染为 0 高度
white-space: nowrap 必须加：防止窄屏下短文本意外换行，破坏竖排连续性

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

微信 Android（尤其 8.0.30 之前）X5 内核基本忽略 writing-mode；iOS 微信取决于系统 WebKit 版本，iPhone 6s 及更早设备大概率不生效。运行时检测比 UA 判断更可靠：

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

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

下载

const el = document.querySelector('.vertical-text');
if (getComputedStyle(el).writingMode !== 'vertical-rl') {
  el.classList.add('fallback-rotate');
}

降级方案别用图片——可用 transform: rotate(90deg) + overflow: hidden 模拟，但注意 touch 坐标偏移（点击位置需手动校正）
降级后必须重设 width/height：旋转后尺寸逻辑反转，原 height: 200px 要变成 width: 200px
避免用 text-align: right 对齐——它在竖排下实际是顶部对齐；改用 text-align: start 或 margin-block-start

竖排容器里用 `flex` 或 `grid` 会出什么问题？

直接给 display: flex 或 display: grid 的父容器加 writing-mode，会导致主轴定义冲突、子项堆叠错位、justify-content 含义反转（比如 center 变成垂直居中而非水平居中）。

若必须嵌套布局，只对纯文本子元素（如 <p></p>、<span></span>）应用 writing-mode，父容器保持横排流
flex-direction: column 在 vertical-rl 下可实现从上到下排列，但需配合 align-items: flex-start 控制对齐
避免用 text-orientation: sideways——它会让汉字也躺倒，完全违背中文排版意图
字体 fallback 要写全：font-family: "PingFang SC", "Heiti SC", "Microsoft YaHei", sans-serif；某些字体（如系统默认 -apple-system）在竖排时会压扁标点