css - 文本缩进一个包装的行内 block 跨度

Question

我正在寻找纯 CSS 解决以下问题的方法。

考虑以下 HTML:

<p>
    <span>Some text</span>
    <span>Some text</span>
</p>

两者都是 <span>正在显示元素 inline-block .如何在第二个 <span> 的左侧缩进或添加填充在后换行？

---

包装前应该是这样的:

包装后像这样:

---

正在分配 padding-left负text-indent不起作用，因为每个 <span>本质上是在其第一行文本上并单独缩进。

请参阅以下代码段和此 jsfiddle 用于我的代码。

p {
/*  Negative indent does not work since
    it applies to all spans individually
    text-indent: -5rem;
    padding-left: 5rem;
*/
}
span {
    color: white;
    font-weight: bold;
    font-size: 22px;
    display: inline-block;
}
.span1 {
    background-color: green;
}
.span2 {
    background-color: blue;
/*  Same problem as when applied to paragraph
    text-indent: -5rem;
    padding-left: 5rem
*/
/*  Will be indented properly when wrapped, but
    we are left with unwanted space when not wrapped
    padding-left: 5rem;
*/
}
.span3 {
    display: block;
    padding-left: 5rem;
    background-color: purple;
}

<p>
    <span class="span1">Howdy,</span>
    <span class="span2">please indent me when I wrap!</span>
    <span class="span3">I should continue being indented.</span>
</p>

Answer 1

我能够想出一些接近的东西，但有两个可能的缺点。这种方法的一个问题是第一个跨度必须比缩进量宽，否则换行不能完全按预期工作。另一个是 background-color 没有延伸到缩进元素的左边:

诀窍是在第二个跨度上有一个margin-left，在第一个跨度上有一个偏移负的margin-right:

.span1 {
    background-color: green;
    margin-right: -5rem;
}
.span2 {
    background-color: blue;
    margin-left: 5rem;
}

http://jsfiddle.net/6ynjybdw/4