Traboccante il testo di una barra di avanzamento bootstrap

Question

Ecco il mio HTML:

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

Questo è il mio 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; 
} 

voglio traboccare il testo di tutti gli elementi div in ogni progress - div classificata You can see in my Fiddle here quello che sto cercando di fare e che il mio CSS funziona per far traboccare il testo del div di sinistra nel div di destra, ma non il contrario (testo del div di destra nel div di sinistra). Come posso farlo funzionare al contrario? Ho provato ad aggiungere position: relative; sul CSS per second-bar ma questo non funziona per me perché poi si rompe il primo scenario.

Answer 1

L'aggiunta dello position: relative; allo stile della seconda barra con larghezza del 10% ha consentito al testo di rimanere sopra la prima barra di avanzamento. JS Fiddle Here. Non è stato possibile aggiungere questo alla classe di css second-bar effettiva, perché la prima barra non si sovrapporrà alla seconda barra.