直接在.progress-bar标签内写文字（如75%）即可显示并随进度居中，需同步更新aria-valuenow与width值确保无障碍一致，多段进度条须各自配置文字和ARIA属性。
Bootstrap 进度条怎么显示文字在条内？
默认情况下，.progress 容器里的 .progress-bar 是空的，文字不会自动居中显示——必须把文字直接写进 <div class="progress-bar"></div> 标签内部，且需确保父容器有足够高度（bootstrap 5 默认 height: 1rem，太小会撑不开文字）。
常见错误是把文字放在 .progress 外层或用伪元素模拟，结果文字被裁剪或错位。正确做法：
- 文字内容直接写在
<div class="progress-bar">75%</div>里 - 添加
text-center或自定义 CSS（如display: flex; align-items: center; justify-content: center;）让文字垂直水平居中 - 若使用 Bootstrap 5，建议加
fw-bold和text-white提升可读性（尤其深色背景条）
如何启用条纹（striped）并和动画一起用？
Bootstrap 的条纹进度条依赖 .progress-bar-striped 类，但它**必须和 .progress-bar 同时存在才生效**；单独加无效。动画（动态流动条纹）还需额外加 .progress-bar-animated。
注意：条纹背景是 SVG 图案，宽度固定为 1rem，所以如果自定义了 height（比如设成 8px），条纹可能被压扁或消失——此时应同步调整 background-size，或改用 CSS 变量覆盖：
.progress-bar-striped {
background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%),
linear-gradient(-45deg, rgba(255,255,255,.15) 25%, transparent 25%),
linear-gradient(45deg, transparent 50%, rgba(255,255,255,.15) 50%),
linear-gradient(-45deg, transparent 50%, rgba(255,255,255,.15) 50%);
background-size: 1rem 1rem;
}
实际项目中，更稳妥的方式是保持默认高度（1rem），或用 min-height 保底。
带文字 + 条纹的完整 HTML 结构长什么样？
以下是在 Bootstrap 5.3 下验证有效的最小可行结构，兼容响应式、无障碍（ARIA 属性已包含）：
<div class="progress" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"> <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" style="width: 75%">75%</div> </div>
关键点：
-
role="progressbar"和 ARIA 属性必须写在外层.progress容器上，不是.progress-bar -
bg-success等颜色类要加在.progress-bar上，否则条纹颜色不会变 - 不要给
.progress-bar设padding或line-height，它靠 flex 布局居中，干扰后文字易偏移
为什么文字有时被截断或看不见？
最常被忽略的是：当 .progress-bar 的 width 小于文字所需空间时，文字会溢出容器被隐藏（overflow: hidden 是默认行为）。这不是 bug，是设计使然。
解决方式取决于场景：
- 宽度固定（如仪表盘卡片）：用
text-truncate+small类缩写字体，或改用百分比数字（“75%”比“已完成”更省空间） - 宽度动态（如响应式布局）：监听
resize或用clamp()控制字号，例如font-size: clamp(0.65rem, 4vw, 0.875rem); - 完全不想截断：移除
overflow: hidden（需重置.progress的样式），但会破坏条形边界视觉，慎用
真正难调的其实是字体抗锯齿和 subpixel 渲染差异——Mac Safari 下文字常发虚，加 -webkit-font-smoothing: antialiased; 能缓解，但别指望全平台一致。
