5
Tu jest mój HTML:Przepełnianie tekście bootstrap pasku postępu
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped first-bar" style="width:10%;">I want this text to overflow into the div to the right</div>
<div class="progress-bar progress-bar-success second-bar" style="width:90%;">I want this text to overflow into the div to the left</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped first-bar" style="width:90%;">I want this text to overflow into the div to the right</div>
<div class="progress-bar progress-bar-success second-bar" style="width:10%;">I want this text to overflow into the div to the left</div>
</div>
To jest mój CSS:
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.first-bar {
white-space: nowrap;
position: relative;
text-align: left;
}
.second-bar {
white-space: nowrap;
text-align: right;
direction: rtl;
}
chcę przelewać teksty wszystkich elementów div w każdym progress - klasyfikowane div. You can see in my Fiddle here co próbuję zrobić i że mój CSS działa dla przepełnienia tekstu lewego div do właściwego div, ale nie na odwrót (tekst prawego div do lewego div). Jak mogę sprawić, aby działało to na odwrót? Próbowałem dodać position: relative; na CSS dla second-bar, ale to nie działa dla mnie, ponieważ wtedy łamie pierwszy scenariusz.
Nie jestem pewien, czy to zadziała. To, co zasadniczo chcesz zrobić, to podzielić model dokumentu na etykiety i pojemniki. Zmodyfikuję to tak, aby twoje etykiety znajdowały się nad twoimi paskami postępu w ich własnych pojemnikach, które nie są ograniczone przez to samo. –
@JECarterII Próbuję tego uniknąć, ale rozumiem, co masz na myśli. Właściwie to miałem trochę szczęścia, robiąc to w ten sposób, zawijając zawartość wewnątrz tagów div: https://jsfiddle.net/ohob3jd5/ Ale mam nadzieję, że jest lepszy sposób. Dzięki za sugestię, rzeczywiście jest prawdziwa! – Alexandru