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

时间：2017-08-07 13:35:43

标签： html css progress-bar

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

enter image description here

当进度条的宽度为40％时，它看起来像这样（如预期的那样）：

enter image description here

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

enter image description here enter image description here

＆＃13;
＆＃13; 
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%;
}
＆＃13; 
<section id="progressish">
  <div id="text">
    <div>100% avklarat</div>
  </div>

  <div id="progressbar">
    <div class="progress" data="bar"></div>
  </div>
</section>
＆＃13;
＆＃13;
＆＃13;

我怎样才能做到这一点？你可以在jsFiddle看到整个源代码：https://jsfiddle.net/a7buqqkk/。

4 个答案:

答案 0 :(得分：5)

如果滚动条的宽度是固定的（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>

答案 1 :(得分：1)

您可以将flexbox用于#text > div，将伪元素用于所需的width。还要为文本添加white-space: nowrap以不换行。将id替换为class es以显示多个进度条值。

演示：

＆＃13;
＆＃13; 
section.progressish {
  width: 300px;
}

div.text > div {
  margin-bottom: 5px;
  max-width: 100%;
  min-width: 100px;
  width: auto !important;
  width: 100px;
  display: flex;
  white-space: nowrap;
}

div.text > div:before {
  content: "";
  width: 100%;
}

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%;
}

.progressish:nth-child(1) .text > div:before,
.progressish:nth-child(1) .progress[data="bar"] {
  width: 20%;
}

.progressish:nth-child(2) .text > div:before,
.progressish:nth-child(2) .progress[data="bar"] {
  width: 40%;
}

.progressish:nth-child(3) .text > div:before,
.progressish:nth-child(3) .progress[data="bar"] {
  width: 60%;
}

.progressish:nth-child(3) .text > div:before,
.progressish:nth-child(3) .progress[data="bar"] {
  width: 80%;
}
＆＃13; 
<section class="progressish">
  <div class="text">
    <div>20% avklarat</div>
  </div>

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

<section class="progressish">
  <div class="text">
    <div>40% avklarat</div>
  </div>

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

<section class="progressish">
  <div class="text">
    <div>60% avklarat</div>
  </div>

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

<section class="progressish">
  <div class="text">
    <div>80% avklarat</div>
  </div>

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

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

  <div class="progressbar">
    <div class="progress" data="bar"></div>
  </div>
</section>
＆＃13;
＆＃13;
＆＃13;

使用动画显示：

＆＃13;
＆＃13; 
section.progressish {
  width: 300px;
}

div.text > div {
  margin-bottom: 5px;
  max-width: 100%;
  min-width: 100px;
  width: auto !important;
  width: 100px;
  display: flex;
  white-space: nowrap;
}

div.text > div:before {
  content: "";
  width: 0%;
}

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: 0%;
}

div.progressbar > .progress[data="bar"],
div.text > div:before {
  animation: 4s linear 0s infinite alternate progress;
}

@keyframes progress { from { width: 0 } to { width: 100%; }  }
＆＃13; 
<section class="progressish">
  <div class="text">
    <div>100% avklarat</div>
  </div>

  <div class="progressbar">
    <div class="progress" data="bar"></div>
  </div>
</section>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

在其他答案中，如果在word.txt元素上更改import random import os with open(os.path.expanduser('~James/word.txt'), 'r') as infile: words = [word for word in infile.read().split() if len(word) == 6] print(words) # -> ['castle', 'manmen'] print(random.choice(words)) # -> manmen ，则代码效果不佳。但我的答案不依赖于width。

A）矩形： 

section
width of section
$(document).ready(function(){
    var per;
    var ft = false;
    var totalWid = $('section').width();
    var spanWid = $('.txt').width();
    var bor = Math.floor(((totalWid - spanWid)/totalWid)*100) - 2;
    setInterval(function(){
        per = Math.round($('.progChild').width()/totalWid*100);
        $('.txt').html(per + '% Progress');
        if(per > bor && !ft){
            $('.txt').addClass('rig').removeClass('arrow');
            ft = !ft;
        }
        else if(per <= bor && ft){
            $('.txt').addClass('arrow').removeClass('rig');
            ft = !ft;
        }
    },100);
})

B）圈子： 

section {
    width: 300px;
    margin-top: 100px;
}

.progParent {
    width: inherit;
    background-color:#000; 
    padding: 1px;
    position: relative;
}

.progChild {
    height: 10px;
    background-color: red;
    animation:mov 5s linear infinite alternate;
    width: 0%;
    float: left;
}

.progParent:after {
    clear: both;
    content: '';
    display: block;
}

.txt {
    position: absolute;
    top: -30px;
    white-space: nowrap;
    background-color: #000;
    color: #FFF;
    border: 1px solid #FFF;
    margin-left: -5px;
    padding:0 2px; 
    font-weight: bold;
}

.arrow:before {
    content: '';
    width: 0;
    height: 0;
    border:5px solid;
    border-color: #000 transparent transparent transparent;
    bottom: -10px;
    left: 0;
    position: absolute;
}

.rig {
    right: 0;
}

@keyframes mov {
    from {width: 0}
    to {width: 100%;background-color: green}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<section>
    <div class="progParent">
        <div class="progChild"></div>
        <span class="txt arrow">0% Progress</span>
    </div>
</section>
$(document).ready(function(){
    var per;
    var ft = false;
    var totalWid = $('section').width();
    var spanWid = $('.txt').width();
    var bor = Math.floor(((totalWid - spanWid)/totalWid)*100);
    setInterval(function(){
        per = Math.round($('.progChild').width()/totalWid*100);
        $('.txt').html(per + '%');
        if(per > bor && !ft){
            $('.txt').addClass('rig').removeClass('arrow');
            ft = !ft;
        }
        else if(per <= bor && ft){
            $('.txt').addClass('arrow').removeClass('rig');
            ft = !ft;
        }
    },100);
})

答案 3 :(得分：0)

只需给文本容器一个max-width属性，对我来说它可以使用69％，但你也可以在px中指定。 检查我的代码：https://codepen.io/Juanito/pen/LjxKBa 

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

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

section#progressish {
  width: 300px;


}

div#text {max-width:69%}

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: 60%;

}
相关问题
最新问题