Bootstrap进度条内不能直接写文字是因为.progress默认overflow: hidden会裁剪内容；需用position: relative+absolute定位配合transform居中，并通过JS同步颜色变化，移动端注意渲染偏差。
Bootstrap进度条里加文字为什么不能直接写在.progress里
因为Bootstrap的.progress容器默认是overflow: hidden，所有超出bar区域的内容（包括你塞进去的<span>50%</span>）都会被裁掉。不是文字没渲染，是它被“藏”在了看不见的地方。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 别把文字节点直接插进
<div class="progress">内部——哪怕加了<code>position: relative也没用，裁剪边界没变 - 文字必须脱离
.progress的裁剪流，常见做法是用绝对定位+父容器设position: relative - Bootstrap 5 的
.progress默认没有position: relative，得自己补上，否则absolute会相对于body定位 - 给
<div class="progress">加<code>position: relative（内联或CSS类都行） - 文字用单独的
<span class="progress-text">75%</span>，放在.progress同级或外部包裹层里 -
.progress-text样式必须包含：position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) - 如果进度条高度不固定（比如用
height: 0.5rem），文字font-size建议用rem或em，避免缩放失衡 - 别指望CSS自动联动；需要JS监听或主动更新，例如：
document.querySelector('.progress-bar').getAttribute('aria-valuenow') - 颜色切换建议用预设class（如
.text-success、.text-warning），而不是内联style.color，方便维护和主题适配 - 如果用Bootstrap 5的
data-bs-*属性或自定义data属性驱动，记得在JS里重新获取值，DOM更新后不会自动触发重绘 - 给
.progress-text加line-height: 1和white-space: nowrap，防换行和基线浮动 - 避免用
vh/vmin做文字大小，改用rem配合html { font-size: clamp(14px, 1.2vw, 16px); } - 真遇到错位，微调
transform: translate(-50%, -50%)为translate(-50%, -51%)，有时差1px就能对齐
怎么用绝对定位把文字精准盖在进度条中央
关键不是“盖上去”，而是“对齐好”。文字位置依赖两个锚点：进度条容器（设position: relative）和文字元素（position: absolute），再配合transform居中，比用left: 50% + margin-left更可靠，尤其响应式下。
实操建议：
立即学习“前端免费学习笔记（深入）”；
文字颜色随进度变化时，为什么color没反应
因为文字不在.progress-bar内部，它不继承进度条的背景色逻辑，更不会自动响应aria-valuenow或JS更新。所谓“随进度变色”，本质是手动同步——JS读取当前值，再改文字的color或class。
实操建议：
立即学习“前端免费学习笔记（深入）”；
移动端文字被截断或错位的常见原因
不是字体问题，是transform: translate()在某些Android WebView或老版iOS Safari里对小尺寸元素计算有偏差，加上font-smoothing或subpixel渲染干扰，导致视觉偏移几个像素。
实操建议：
立即学习“前端免费学习笔记（深入）”；
层级覆盖这事，看着是CSS定位问题，实际卡点常在父容器的overflow和position组合、文字盒模型的隐式行为、以及移动端渲染引擎的细微差异——调完记得在真机上连按三次Home键切后台再切回来，有些渲染bug只在view lifecycle重绘时才暴露。
