文字垂直滚动最直接方式是transform: rotate(-90deg)，再配合@keyframes动画控制translateX实现匀速无缝滚动，需注意容器宽高固定、overflow隐藏及移动端渲染优化。
文字垂直滚动用 transform: rotate(-90deg) 最直接
bootstrap 本身不提供垂直滚动文字的内置类，它不是 css 排版库，而是响应式布局和组件框架。想让文字竖着滚动，核心得靠 css 的 transform 和动画控制，bootstrap 只能辅助做容器、间距或响应式断点。
常见错误是试图用 flex-column 或 flex-wrap 强行“堆”文字——那只是换行，不是旋转；还有人用 writing-mode: vertical-rl，但滚动方向难控，且在 Safari 旧版本里表现不一致。
-
transform: rotate(-90deg)是最可控的方式：文字真正转成竖排，后续用animation控制translateY就能实现上下滚动 - 必须给容器设固定宽高，并用
overflow: hidden截掉超出部分 - 注意旋转后坐标系变化：原本的“上下滚动”要变成
translateX（因为文字已横过来）
滚动动画必须用 @keyframes + animation 手写
Bootstrap 的 animate-* 工具类（如 animate-pulse）只适用于预设简单动效，不支持自定义路径或持续位移。文字垂直滚动本质是连续位移，必须自己写关键帧。
典型场景：新闻跑马灯、股票代码列表、日志流实时展示——这些都需要匀速、无缝、可暂停的滚动。
- 用
@keyframes scroll-up定义从transform: translateX(0)到translateX(-100%) - 动画时长按内容长度调：太短会闪，太长会卡顿；建议起始设
20s，再根据实际微调 - 加
animation-iteration-count: infinite实现循环，别漏掉animation-timing-function: linear，否则会有“抖停”感
移动端要注意 transform 触发硬件加速和字体渲染差异
在 iOS Safari 或部分安卓 WebView 里，rotate(-90deg) 后文字可能变模糊、锯齿明显，甚至触发重排导致滚动卡顿。
这不是 Bootstrap 的锅，是浏览器对 2D 变换的优化策略不同。尤其当文字含中文或小字号时更明显。
- 强制开启 GPU 加速：
transform: rotate(-90deg) translateZ(0) - 避免用
rem或em做字体大小，改用px（比如font-size: 14px），减少缩放计算误差 - 如果内容允许，把文字包进
<svg>用<text>渲染，SVG 的旋转和动画兼容性更稳
用 Bootstrap 容器时，记得关掉默认 white-space 干扰
Bootstrap 的 .text-truncate、.text-wrap 甚至 .container 内部的 display: block 都可能影响旋转后文字的换行和溢出行为。
最常踩的坑是：文字明明写了 rotate，却还是横着挤在一行里不动——其实是 white-space: nowrap 在作祟（某些版本 Bootstrap 默认设了）。
- 显式重置：
white-space: normal或white-space: initial - 确保父容器没有
.text-truncate，它会加overflow: hidden+text-overflow: ellipsis，跟滚动逻辑冲突 - 如果用
.col布局，加上min-width: 0防止 flex 项收缩导致旋转错位
事情说清了就结束。真正难的不是旋转，是让滚动在各种屏幕密度、系统字体设置、WebView 版本下都保持匀速不跳帧——这得靠反复真机测，不是加个 class 能解决的。
