超出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 元素的文本。您可以在这里查看我的 Fiddle，了解我试图做什么以及我的 CSS 如何将左侧 div 的文本溢出到右侧 div，但不能反过来（即右侧 div 的文本溢出到左侧 div）。如何让它反过来工作？我尝试在 second-bar 的 CSS 中添加 position: relative;，但这对我不起作用，因为它会破坏第一种情况。

- Alexandru

---

我不确定它会起作用。你想做的基本上是将文档模型分解为标签和容器。我建议重新构造，使您的标签位于自己的容器中，覆盖进度条div，而不受相同限制。 - J E Carter II

@JECarterII 我正在尝试避免这种情况，但我明白你的意思。实际上，我通过在内容内部包装div标签的方式有一些成功：https://jsfiddle.net/ohob3jd5/ 但肯定有更好的方法，我希望能找到。感谢您的建议，它确实是有效的！ - Alexandru

Answer 1

将第二个宽度为10%的进度条的样式添加“position: relative;”属性，使文本保持在第一个进度条上方。在这里查看JS Fiddle。 我无法将此添加到实际的“second-bar”css类中，因为第一条进度条不会溢出到第二条进度条中。

- Matt