仅缩进第二行文本

Question

我有2个跨区文本样式，一个溢出到第二行，我试图弄清楚如何只能缩进第二行。有没有人有一个解决方案，不要求我把它们放在自己的容器中？

<span class="step-a">STEP 3.</span><span class="step-b">This line is ok.</span>
<span class="step-a">STEP 4.</span><span class="step-b">I don't like the way this wraps</span>
<span class="step-a">STEP 5.</span><span class="step-b">This line is ok.</span>

.step-a { display:inline; color:#3498DB; font-size: 14px; text-transform:capitalize; vertical-align:baseline; } 
.step-b { display:inline; color:#8e8e93; font-size: 16px; vertical-align:baseline; padding-left:10px; } 
.step-b:after { content:"\A"; white-space:pre; }

Answer 1

这是您的解决方案：http://jsfiddle.net/mYQZp/

HTML

<div class="container">
    <div>
        <span class="step-a">STEP 3.</span><span class="step-b">This line is ok.</span>
    </div>

    <div>
<span class="step-a">STEP 4.</span><span class="step-b">I don't like the way this wraps</span>
    </div>

    <div>
<span class="step-a">STEP 5.</span><span class="step-b">This line is ok.</span>
    </div>
    <div class="clear"></div>
</div>

CSS

.step-a {
    display:block;
    width:50px;
    color:#3498DB;
    font-size: 14px;
    padding-top:2px;
    text-transform:capitalize;
    vertical-align:baseline;
    float:left;
}
.step-b {
    display:block;
    width:90px;
    color:#8e8e93;
    font-size: 16px;
    vertical-align:baseline;
    padding-left:10px;
    float:left;
}
.step-b:after {
    content:"\A"; white-space:pre; }

.clear{clear:both; height:1px;}
.container{display: block; width:175px; background:#f2f2f2; padding:10px;}

Answer 2

我只有css方式（fiddle）：

.step-a {
    float: left;
    display:inline;
    color:#3498DB;
    font-size: 14px;
    text-transform:capitalize;
    vertical-align:baseline;
}
.step-b {
    color: #8e8e93;
    font-size: 16px;
    vertical-align: baseline;
    padding-left: 10px;
    display: block;
    word-break: break-all;
    overflow: hidden;
}