溢出引导进度条的文本

Question

这是我的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>

这是我的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;
}

我想溢出每个progressdiv中div 中所有div元素的文本.你可以在我的小提琴中看到我想要做的事情,我的CSS用于将左div的文本溢出到右边的div中,但不是相反的方式(右边div的文本到左边div).我怎样才能让它以相反的方式工作？我尝试过添加position: relative;CSS,second-bar但这对我不起作用,因为它打破了第一个场景.

Answer 1

添加position: relative;10% 宽度的第二个进度条的样式允许文本保持在第一个进度条上方。JS 小提琴在这里。我无法将其添加到实际的second-barcss 类中，因为第一个栏不会溢出到第二个栏。