在文本的背景颜色，在线包裹维护左填充(Background color on text, maintain left padding on line wrap)

在文本的背景颜色，在线包裹维护左填充(Background color on text, maintain left padding on line wrap)

我正在尝试创建一种将背景颜色应用于标题文本的样式。 这很简单，在我的标题中包含一个内联元素，但是当有一个换行时会出现问题，因为左边的填充只应用于第一行文本。 为了解决这个问题，我将一个左边框应用于我的标头标签，它在换行期间正确地保持左边距。 但是，我遇到了严重的问题，左边框高度与跨浏览器的内联元素背景相匹配。 我把它与Chrome / Safari相匹配，并且它在Firefox等中关闭了。我创建了一个小提琴来演示：

http://jsfiddle.net/spidercoder/4KJn2/1/

我的方法是：

HTML：

<h1><span>Lorem ipsum dolor sit amet consectetur adipiscing elit.</span></h1>

CSS：

h1{ color: white; text-transform: uppercase; font-family: sans-serif; font-size: 34px; line-height: 44px; border-left: 10px solid black; padding: 8px 0 7px 0;} // This tweaks the height of the left-border h1 span{ white-space: pre-wrap; background: black; padding: 10px 10px 10px 0;}

我尝试了几种不同的方法，但遗憾的是没有任何方法可行。 这似乎是一个相当简单的效果，但是我无法在浏览器中正确匹配边框的高度和跨度背景，这会破坏效果。

有没有人对如何解决这个问题有任何想法，所以它适用于各种浏览器？ 不需要左边框的方法可能是最好的，因此我们不必匹配元素高度。

谢谢你的任何建议！

I am attempting to create a style that applies a background color to header text. This is simple enough by including an inline element within my header, but problems arise when there is a line wrap because the left padding is only applied to the first line of text. To solve this issue I am applying a left-border to my header tags, which properly maintains left padding during line wraps. However, I'm having serious issues matching the left-border height with the inline element background across browsers. I get it matched up in Chrome/Safari, and it's off in Firefox, etc. I've created a fiddle to demonstrate:

http://jsfiddle.net/spidercoder/4KJn2/1/

My approach is:

HTML:

<h1><span>Lorem ipsum dolor sit amet consectetur adipiscing elit.</span></h1>

CSS:

h1{ color: white; text-transform: uppercase; font-family: sans-serif; font-size: 34px; line-height: 44px; border-left: 10px solid black; padding: 8px 0 7px 0;} // This tweaks the height of the left-border h1 span{ white-space: pre-wrap; background: black; padding: 10px 10px 10px 0;}

I've attempted several different approaches, but unfortunately nothing is working. This seems like a fairly simple effect to pull off, but I have been unable to properly match the height of the border with the span background across browsers, which ruins the effect.

Does anyone have any ideas on how to pull this off so it works across browsers? An approach that doesn't require the left-border would probably be best, so that we don't have to match element heights.

Thanks for any suggestions!

最满意答案

添加到span ：

box-shadow: 10px 0 0 black, -10px 0 0 black;

要不就：

box-shadow: -10px 0 0 black;

在这里找到后自己使用它：

http://css-tricks.com/multi-line-padded-text/

还有许多其他方法可以在那里列出。

Add to the span:

box-shadow: 10px 0 0 black, -10px 0 0 black;

Or Just:

box-shadow: -10px 0 0 black;

Used this myself after finding it here:

http://css-tricks.com/multi-line-padded-text/

There are many other methods by which this can be done listed there.