कंटेनर से बाहर जाने वाले पाठ को रोकें यदि यह 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

यदि स्क्रॉलबार की चौड़ाई तय की गई है (300 पीएक्स), और टेक्स्ट की चौड़ाई (पाठ, तत्व नहीं है) कम या कम तय किया गया है (लगभग 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% के साथ काम करता है, लेकिन आप पिक्सल में भी निर्दिष्ट कर सकते हैं। 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

आप की जरूरत width साथ #text > div के लिए flexbox और pseudoelement उपयोग कर सकते हैं: मेरे codepen जाँच । लपेटने के लिए पाठ के लिए white-space: nowrap भी जोड़ें। कई प्रगति पट्टी मूल्य दिखाने के लिए class es के साथ id एस को प्रतिस्थापित किया गया।

डेमो:

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 में अगर widthsection तत्व पर बदलते हैं, तो कोड अच्छी तरह से काम नहीं करते हैं। लेकिन मेरा जवाब 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); 
 
})

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

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>