Bootstrap本身不提供文字真正竖排的内置类；推荐用writing-mode: vertical-rl配合text-orientation: mixed实现原生竖排，或用transform: rotate(-90deg)加translateX实现可控滚动，二者不可混用。
bootstrap 本身不提供让文字“真正竖排”的内置类，text-vertical、vertical-align 这类写法完全无效——它们控制的是对齐方式，不是文字方向。
用 writing-mode: vertical-rl 最快但兼容性有坑
这是 CSS 原生支持文字竖排的属性，一行 CSS 就能生效：
<div class="vertical-text">你好世界</div>
对应 CSS：
.vertical-text {
writing-mode: vertical-rl;
text-orientation: mixed; /* 让数字/英文保持正向 */
}- ✅ 优点：语义正确、无需旋转、支持换行和文本流
- ⚠️ Safari 15.4 之前不支持
text-orientation: mixed，中文正常，但英文/数字会倒着显示（如 “2026” 变成 “6202” 倒立） - ⚠️ 在 iOS WebView 或某些安卓旧版中，
writing-mode可能触发重排，滚动卡顿 - ❌ 别跟
transform: rotate()混用——两者叠加会导致坐标系混乱，动画位移失效
transform: rotate(-90deg) 更可控，但必须配 translateX
这是目前最稳妥的竖排+滚动方案，尤其适合新闻跑马灯、日志流等场景：
<div class="vertical-scroll"><span>消息一</span><span>消息二</span></div>
CSS 要点：
- 容器必须设固定宽高 +
overflow: hidden -
transform: rotate(-90deg) translateZ(0)强制 GPU 加速，减少 iOS 模糊 - 动画用
translateX（不是translateY），因为旋转后坐标系已翻转 - 字体统一用
font-size: 14px，避免rem/em在缩放时错位
常见错误：rotate(-90deg) 后文字仍横着挤成一行？大概率是父容器没关掉 white-space: nowrap 或 Bootstrap 的 .text-truncate 干扰了换行。
别碰 flex-column 或 flex-wrap 想“堆出”竖排
有人试过这样写：
<div class="d-flex flex-column"><span>字</span><span>符</span><span>串</span></div>
这根本不是竖排，只是把每个字当一个块元素垂直堆叠——它破坏了文本连续性，无法选中、无法复制、不能被屏幕阅读器识别为一句话，且在小屏上极易溢出。
更糟的是，如果内容来自 API 动态渲染，这种结构会让 DOM 节点数暴增，影响性能。
移动端竖排文字模糊？加 translateZ(0) 和固定字号
iOS Safari 对 2D 变换的字体渲染优化差，尤其小字号中文容易发虚。解决方法很具体：
- 给竖排文字容器加
transform: rotate(-90deg) translateZ(0) - 显式声明
font-size: 16px（不用0.875rem） - 避免背景半透明或 backdrop-filter，这些会进一步加剧模糊
- 真要极致兼容，把文字包进
<svg><text>，SVG 的竖排动画在所有平台都稳
最后提醒一句：Bootstrap 的角色是布局和组件框架，不是排版引擎。文字方向这件事，得交给 CSS 原生能力来扛，Bootstrap 只负责帮你管好容器尺寸、响应断点和外边距——别指望它替你写 @keyframes 或修正 Safari 的 writing-mode bug。
