Bootstrap进度条优化：高百分比时进度不被文字阻挡

核心实现思路 #

• 给进度条容器添加相对定位，作为百分比文字的定位基准
• 将百分比文字设置为绝对定位，脱离文档流，避免挤占进度条的显示空间
• 通过样式调整确保文字始终在进度条上方，低百分比时位于进度条右侧空白处，高百分比时直接覆盖在进度条上

修改后的完整代码 #

HTML结构

<td class="occurrence fw-normal text-light small pe-4">
  <div class="progress d-flex position-relative">
    <div class="progress-bar occurrence" 
         role="progressbar" 
         aria-valuemin="0" 
         aria-valuemax="100" 
         aria-valuenow="100" 
         data-bs-toggle="tooltip" 
         data-bs-placement="top" 
         title="" 
         style="width: 100%;" 
         data-bs-original-title="Appears in 10 comments" 
         aria-label="Appears in 10 comments">
    </div>
    <span class="occurrence percentage fw-bold position-absolute end-0 pe-2">
      100&nbsp;%
    </span>
  </div>
</td>

补充CSS样式

.progress.position-relative {
  overflow: visible; /* 避免容器裁剪绝对定位的文字 */
}

.percentage.position-absolute {
  background-color: transparent; /* 透明背景，让进度条可在下方显示 */
  z-index: 1; /* 确保文字层级高于进度条 */
  white-space: nowrap; /* 防止百分比文字换行 */
}

效果说明 #

• 当百分比≤85%时，进度条未填满容器，文字会自动显示在进度条右侧的空白区域，保持原有视觉效果
• 当百分比>85%时，进度条会继续填满整个容器，文字通过绝对定位覆盖在进度条右侧，既保证进度条完整展示，又能清晰看到百分比数字

内容的提问来源于stack exchange，提问作者Jeroen