Bootstrap进度条进度<30%时文本不可见问题求助

当进度条宽度（如10%）小于内部文本宽度时，文本会被进度条容器裁切，导致无法显示，这就是你遇到的问题。下面提供几种可行的解决方法：

方案1：绝对定位文本，脱离进度条宽度限制 #

通过给进度条父容器设置相对定位，新增独立的文本容器并设置绝对定位，让文本始终显示在进度条区域内（居中），不受进度条自身宽度影响。

修改后的HTML #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<style>
.progress {
  position: relative;
}
.progress-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  pointer-events: none;
}
</style>

<div class="col-3 offset-md-1 col-md-2 mydivLabel text-right ">
  <a href="http://192.168.1.79/">
    <img src="https://via.placeholder.com/50" height="23px" width="70px"></a>
</div>

<div class="col-6 offset-2 offset-md-0 col-md-3 mydiv">
  <div class="container-fluid">
    <div class="progress" style="height: 24px;">
      <div id="batLaderichtung" style="width: 0%;" class="progress-bar progress-bar-animated progress-bar-striped">
      </div>
      <div id="progressText" class="progress-text">0%</div>
    </div>
  </div>
</div>

修改后的JavaScript #

const data = {
  BatterySOC: 10
}

const dbu = 20;
const soc = Math.floor(data.BatterySOC);

document.getElementById('batLaderichtung').style.width = soc + "%";
document.getElementById('progressText').innerHTML = `${soc}% (${dbu} W)`;

方案2：动态调整文本字体大小 #

通过JavaScript判断进度值，当进度低于30%时缩小文本字体并减少内边距，让文本适配窄进度条。

修改后的JavaScript #

const data = {
  BatterySOC: 10
}

const dbu = 20;
const soc = Math.floor(data.BatterySOC);
const progressBar = document.getElementById('batLaderichtung');

progressBar.innerHTML = `${soc}% (${dbu} W)`;
progressBar.style.width = `${soc}%`;

if (soc < 30) {
  progressBar.style.fontSize = "0.75rem";
  progressBar.style.padding = "0 2px";
}

方案3：将文本移到进度条外部 #

把文本放在进度条旁边单独显示，彻底避免宽度限制问题，同时保持信息关联。

修改后的HTML #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<div class="col-3 offset-md-1 col-md-2 mydivLabel text-right ">
  <a href="http://192.168.1.79/">
    <img src="https://via.placeholder.com/50" height="23px" width="70px"></a>
</div>

<div class="col-6 offset-2 offset-md-0 col-md-3 mydiv d-flex align-items-center gap-2">
  <div class="container-fluid flex-grow-1">
    <div class="progress" style="height: 24px;">
      <div id="batLaderichtung" style="width: 0%;" class="progress-bar progress-bar-animated progress-bar-striped">
      </div>
    </div>
  </div>
  <span id="progressText">0%</span>
</div>

修改后的JavaScript #

const data = {
  BatterySOC: 10
}

const dbu = 20;
const soc = Math.floor(data.BatterySOC);

document.getElementById('batLaderichtung').style.width = `${soc}%`;
document.getElementById('progressText').innerHTML = `${soc}% (${dbu} W)`;

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