防止文本走出容器，如果它的寬度超過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>

Answer 2

只要給文本的容器中的最大寬度財產，對我來說它的工作原理與69％，但你可以在PX同時指定。 檢查我codepen：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%; 

} 

Answer 3

您可以使用#text > div Flexbox的和pseudoelement有需要width。還要添加文字white-space: nowrap以便不換行。將id s替換爲class es以顯示多個進度欄值。

演示：

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

<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>

動畫顯示：

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

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

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

Answer 4

在其它ANS如果在section元素上更改width，則代碼不會很好地工作。但我的答案並不取決於width of section。

A）矩形：

$(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); 
 
})

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>

B）圓：

$(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); 
 
})

section { 
 
    width: 400px; 
 
    margin: 100px 0 0 50px; 
 
} 
 

 
.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: -60px; 
 
    white-space: nowrap; 
 
    background-color: #000; 
 
    color: orange; 
 
    border: 1px solid #FFF; 
 
    margin-left: -25px; 
 
    padding:0; 
 
    font-weight: bold; 
 
    width: 50px; 
 
    height: 50px; 
 
    border-radius: 100%; 
 
    line-height: 50px; 
 
    text-align: center; 
 
} 
 

 
.arrow:before { 
 
    content: ''; 
 
    width: 0; 
 
    height: 0; 
 
    border:5px solid; 
 
    border-color: #000 transparent transparent transparent; 
 
    bottom: -9px; 
 
    left: 20px; 
 
    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%</span> 
 
    </div> 
 
</section>