将div的文本向左溢出，同时保留特殊字符

Question

带有此HTML标记的

I have this fiddle：

<div class="progress">
    <div class="progress-bar progress-bar-warning progress-bar-striped" style="width:90%;">
        <div class="first-bar"></div>
    </div>
    <div class="progress-bar progress-bar-success" style="width:10%;">
        <div class="second-bar">99.9% done, but I want this percentage to be on the left while maintaining this leftward overflow of text!</div>
    </div>
</div>

这是CSS：

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.first-bar {
    margin-top: 2px;
    margin-left: 10px;
    white-space: nowrap;
    position: relative;
    text-align: left;
}
.second-bar {
    margin-top: 2px;
    margin-right: 10px;
    white-space: nowrap;
    position: relative;
    text-align: right;
    direction: rtl;
}

我的问题是由于我的CSS上的direction: rtl，数字未正确对齐。它不是我的div的文本阅读99.9% done, but I want this percentage to be on the left while maintaining this leftward overflow of text!，而是!done, but I want this percentage to be on the left while maintaining this leftward overflow of text 99.9%如何保留这个向左溢出，同时保留其中一些字符的字顺序？

Answer 1

我只需在float: right;上添加direction: rtl;而不是second-bar。