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）。我怎样才能让它以相反的方式工作？我尝试在position: relative;的CSS上添加second-bar，但这对我不起作用，因为它打破了第一种情况。

Answer 1

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

溢出引导进度条的文本

1 个答案: