html - 如果文本宽度超过 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>