html - 溢出 Bootstrap 进度条的文本

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

我想溢出每个 progress 类 div 中所有 div 元素的文本。 You can see in my Fiddle here我正在尝试做的是我的 CSS 用于将左侧 div 的文本溢出到右侧 div，而不是相反(右侧 div 的文本到左侧 div)。我怎样才能让它以相反的方式工作？我尝试在 second-bar 的 CSS 上添加 position: relative; 但这对我不起作用，因为它打破了第一个场景。

Answer 1

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