如果文本宽度超过90%,则防止文本从容器中移出

Question

我希望将进度文本放在容器内progressish,即使宽度是100%的示例.就像现在一样,文本固定在容器的右侧,如下面的第一张图所示.

当进度条的宽度为40%时,它看起来像这样(如预期的那样):

但是当进度为90%或100%时,我希望文本卡在进度条的最右边,如下所示:

section#progressish {
  width: 300px;
}

div#text {}

div#text>div {
  margin-bottom: 5px;
  margin-left: 100%;
  min-width: 100px;
  width: auto !important;
  width: 100px;
}

div#progressbar {
  background-color: #d1d1d1;
  height: 10px;
  margin-bottom: 15px;
  width: 100%;
}

div#progressbar>.progress[data="bar"] {
  background-color: #111111;
  height: 10px;
  margin-bottom: 15px;
  width: 100%;
}

<section id="progressish">
  <div id="text">
    <div>100% avklarat</div>
  </div>

  <div id="progressbar">
    <div class="progress" data="bar"></div>
  </div>
</section>

我怎么能做到这一点？你可以在jsFiddle上看到完整的源代码:https://jsfiddle.net/a7buqqkk/ .

Answer 1

如果滚动条的宽度是固定的(300px),并且文本的宽度(文本,而不是元素)或多或少是固定的(大约85px - 从1%到100%),请将文本设置为绝对定位的伪元素孩子的.progress,并设置它width和max-width:

width: calc(100% + 100px);
max-width: 300px;

如果您将文本对齐,它将显示在条形图之后,直到max-width到达.

/** js to demonstrate changing values **/
var progressBar = document.querySelector('.progress');
function progress() {
  var minmax = [0, 100];
  var step = 1;
  
  const iterate = (current) => {
    progressBar.style.width = `${current}%`;
    progressBar.setAttribute('data-percentage', current);
    
    if(current !== minmax[1]) {
      setTimeout(() => iterate(current + step), 40);
    } else {
      minmax = minmax.reverse();
      step = -step;
      
      setTimeout(() => iterate(minmax[0]), 500);
    }
  }
  
  iterate(minmax[0]);
}

progress();

section#progressish {
  padding: 20px;
  width: 300px;
}

div#progressbar {
  background-color: #d1d1d1;
  height: 10px;
  margin-bottom: 15px;
  width: 100%;
}

div#progressbar>.progress[data="bar"] {
  position: relative;
  background-color: #111111;
  height: 10px;
  margin-bottom: 15px;
  width: 0%;
}

.progress::before {
  position: absolute;
  top: -20px;
  width: calc(100% + 85px);
  max-width: 300px;
  text-align: right;
  white-space: nowrap;
  content: attr(data-percentage)"% avklarat";
}

<section id="progressish">
  <div id="progressbar">
    <div class="progress" data="bar" data-percentage></div>
  </div>
</section>