跨度背景颜色和填充问题答案

【问题标题】：span background-color & padding problems跨度背景颜色和填充问题
【发布时间】：2011-08-18 19:06:21
【问题描述】：

我有一个我想要实现的设计，其中包含以自己的背景颜色显示的标题文本，在图像上填充 10 像素，例如：

http://i.stack.imgur.com/E7EpS.png

这张图片的第一个例子效果很好，而且很简单：

.greenbox {width:520px; height:261px; position:relative;}
.greenbox span { padding:0 10px; background:#000; position:absolute; left:0; bottom:40px; }

当文本溢出到另一行时会出现问题，然后 span 元素填充不会影响换行符上的文本，它呈现如下：

http://i.stack.imgur.com/pY18f.png

任何人都知道替代方案，或者他们将如何设置此设计以使背景颜色和填充保持一致？

提前致谢

编辑：我简化了代码以使其简洁，但遗漏了一个重要部分。其实是这样的：

.greenbox {width:520px; height:261px; position:relative;}
.greenbox a {position:absolute; left:0; bottom:40px; }
.greenbox span { padding:0 10px; background:#000; }

html 为：

<div class="greenbox">

    <a href="link"><span>The Title Goes Here</span></a>

</div>

因此跨度保持内联，包裹在绝对位置锚点中。

【问题讨论】：

请提供您的标记代码示例。 JsFiddle 是一个很好的方法
在您的问题中发布标记实际上是首选方法，jsfiddle 是次要的。如果我理解正确，我认为这是一个“错误”，这里有一个关于它的问题，有很多失败的尝试作为解决方案，我会尝试找到它。
找到它：CSS create padding before line-break
我也放了一个 jsfiddle：jsfiddle.net/fNGgN/1 注意第一行的结尾和第二行的开头没有填充。嗨，韦斯利，是的，它实际上与您的链接的问题相同，尽管没有那么复杂 - 窗口大小调整和之前未突出显示的文本不是问题。

标签： css

【解决方案1】：

我之前处理过类似的事情：Add padding at the beginning and end of each line of text

我已经从我自己那里抢走了那个解决方案，并将它适合你的情况。

请注意，line-height 和 padding 调整可能非常棘手要正确。

见：http://jsbin.com/ahoyug

HTML：

<div class="greenbox">
    <a href="#"><span><span>
        The Title Goes Here, with overflow
    </span></span></a>
</div>

CSS：

.greenbox {width:500px; height:200px; position:relative; background:green}

.greenbox > a {
    font: 50px sans-serif;
    line-height: 1.14;
    padding: 0;
    border-left: 20px solid #000;
    position: absolute;
    left: 0;
    bottom: 60px;
    text-decoration: none;
    color: #fff
}
.greenbox > a > span {
    background: #000
}
.greenbox > a > span > span {
    position: relative;
    left: -10px
}

【讨论】：

太棒了！嗯，感觉很可怕，双跨，但它很有效。左边框->那里有很好的横向思维:)
是的，我同意。我希望可以做得更优雅。
更新后的 jsbin 使用 box-shadow 来实现，如果我可以说它本质上是一个单行修复，那么优雅。
在现代浏览器中更简单的方法 (box-shadow): jsfiddle.net/thirtydot/HksP2/57

【解决方案2】：

比较简单的方法是将border 添加到链接的左侧，然后添加两个包装器，然后将第一个定位到左侧，第二个定位到右侧，所以它会像这样：http://jsfiddle.net/kizu/fNGgN/4/

【讨论】：

我完全会做同样的事情！ :)
哈哈，是的，确实！我用额外的包装器修改了我的版本，因为有了它你可以独立于边界：jsfiddle.net/kizu/fNGgN/5 :)
提示那些想要使用行填充执行此操作的人，如果添加第三个换行是可能的！