Geek Answers Handbook

Overflow progress bar text overflow

Here is my 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>

This is my 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; }

I want to overflow the text of all div elements in each progress classified div. You can see in my Fiddle here what I'm trying to do, and that my CSS works to overflow the text of the left div into the right div, but not vice versa (the text of the right div in the left div). How can I make it work the other way around? I tried to add position: relative; in CSS for second-bar , but this does not work for me, because then it breaks the first script.

+5
source share
1 answer

Adding position: relative; in the style of the second bar with a width of 10% allowed to leave the text above the first progress bar. JS Fiddle Here. I could not add this to the actual second-bar css class, because the first line would not overflow into the second bar.

0
source

More articles:


All Articles