仅缩进第二行文本

Question

我有两种跨度文本样式，其中一种会溢出到第二行。我想知道如何只缩进第二行。有没有人有解决方案，而不需要把它们放在自己的容器中？

我已经附上了图片以进行演示。

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

- rizzledon

---

我可以将span改成div吗？ - Alex

为什么不使用表格或列表（li或ul）呢？ - Wietse

@Wietse 看起来不可避免了... - rizzledon

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

- Mayank Tripathi

---

在 Chrome 中看起来很糟糕。 - Morpheus

在我的 Firefox 上看起来很好，@rizzledon。 - Mayank Tripathi

@MayankTripathi 抱歉，我的意思是在火狐浏览器中可以工作，但不适用于Safari。 - rizzledon

在我的Safari中看起来很好，@rizzledon。 - Mayank Tripathi

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

- Alex