我希望将进度文本放在容器进度中,即使宽度是示例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/看到整个源代码.
解决方法
如果滚动条的宽度是固定的(300px),并且文本的宽度(文本,而不是元素)或多或少是固定的(大约85px – 从1％到100％),请将文本设置为绝对定位的伪元素.progress的子项,并设置它的宽度和最大宽度：
width: calc(100% + 100px); max-width: 300px;
如果将文本右对齐,它将显示在条形后面,直到达到最大宽度.
/** 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>
