行，但需兼顾浏览器兼容性、字体支持与样式细节：iOS Safari 12.2+、Android Chrome 76+ 支持 writing-mode: vertical-rl，微信X5内核及旧iOS WebKit支持不佳，须配合 text-orientation: mixed、font-family fallback 及真机测试。
移动端竖排文字用 writing-mode 行不行？
行，但得看浏览器和字体——iOS Safari 12.2+、Android Chrome 76+ 支持 writing-mode: vertical-rl，但 iOS 旧版本（尤其微信内置 WebView）可能回退成横排或截断。不是所有中文字体都支持竖排对齐，比如系统默认的 -apple-system 在竖排时可能把标点压扁或错位。
writing-mode: vertical-rl 的基础写法和关键参数
竖排核心是 writing-mode: vertical-rl，它让文字从上到下、从右到左排列。但光写这句远远不够：
-
text-orientation: mixed必须加，否则汉字会旋转90°（变成躺着的），而阿拉伯数字和英文字母保持正立 -
white-space: nowrap推荐加，避免短文本在窄容器里意外换行 - 如果容器有固定宽高，记得设
height而非width——竖排后“行高”实际是水平方向尺寸
示例：
.vertical-text {<br> writing-mode: vertical-rl;<br> text-orientation: mixed;<br> white-space: nowrap;<br> height: 120px;<br>}
微信里竖排文字突然变横排或乱码？
这是最常踩的坑：微信 Android 客户端（尤其 8.0.30 之前）的 X5 内核对 writing-mode 支持不完整，部分机型会直接忽略该声明。iOS 微信则依赖系统 WebKit 版本，iPhone 6s 及更早设备大概率失效。
立即学习“前端免费学习笔记（深入）”；
- 检测手段：用
getComputedStyle(el).writingMode判断是否生效，不等于"vertical-rl"就得降级 - 降级方案别用图片——可用
transform: rotate(90deg)+ 容器overflow: hidden模拟，但注意 touch 事件坐标会偏移 - 字体 fallback 要写全：
font-family: "PingFang SC", "Heiti SC", "Microsoft YaHei", sans-serif，避免某些字体竖排时字距崩坏
竖排中文里的标点、数字、英文怎么对齐？
text-orientation: mixed 是关键，但它只保证“大部分字符正立”，具体行为还受 Unicode 字符属性影响：
- 中文标点（如，。！？）默认按汉字处理，正立显示；但破折号
——、省略号…可能被当西文处理，歪斜 - 纯数字串（如
2024）会整体顺时针转90°，想保持正立得用text-orientation: upright，但这会让汉字也躺倒——不可兼得 - 解决方案：把数字/英文单独包
<span class="inline-upright">2024</span>，再给它加text-orientation: upright和transform: translateX(-2px)微调位置
复杂点在于：同一段竖排文本里混排规则不统一，不同浏览器对 text-orientation 解析仍有差异，上线前必须真机测 iOS + 安卓主流机型，不能只信模拟器
