文本缩进包装的内联块跨度

Question

我正在寻找针对以下问题的 仅限CSS 解决方案。

考虑以下HTML：

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

正在显示<span>个元素inline-block。在 包装到新行之后，如何在第二个<span> 的左侧缩进或添加填充？

---

在换行之前看起来应该是这样的：

包装后像这样：

---

使用否定padding-left分配text-indent不起作用，因为每个<span>基本上位于其第一行文字并单独缩进。

请参阅以下代码段以及此代码的 jsfiddle 。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

我能够提出一些接近的东西，有两个可能的缺点。这种方法的一个问题是第一个跨度必须比缩进量宽，否则包装不能完全按预期工作。另一个是背景颜色没有延伸到缩进元素的左边：

诀窍是在第二个范围内有一个margin-left并且在第一个范围内有一个抵消负margin-right：

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

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