CSS - 对两行内联元素应用填充 [英] CSS - apply padding to inline element across two lines

问题描述

我必须创建一个样式来应用背景颜色和填充到标题元素，导致以下预期外观（Photoshop模型）：

I have to create a style to apply a background color and padding to a header element, resulting the following intended appearance (Photoshop mock-up):

我的CSS如下（编辑以显示相关规则）

My CSS is as follows (edited to show relevant rules)

h1 {
    color: #fff;
    line-height: 1.4;
    background: #41a293;
    padding: 2px 4px; 
    display:inline;
}

这会产生以下结果：

我在元素（'S'）的开头和最后（'e'）填充，但不是文本断开的位置。由于其父DIV的宽度，发生中断。

I get padding at the start of the element ('S'), and at the very end ('e'), but not where the text breaks. The break happens due to the width of it's parent DIV. This will happen often and is necessary.

有没有办法确保元素在文本断点的地方甚至填充？

Is there any way to ensure the element gets even padding at the points where the text breaks?

非常感谢
Dave

Many thanks Dave

编辑 - 我还应该说，文本内容将通过CMS（Wordpress）显示。 / p>

EDIT - I should have also said that the text content will display via a CMS (Wordpress).

推荐答案

使用jQuery将你的h1中的每一个字覆盖到一个span中几乎可以做到。我不知道它如何影响SEO，虽然老实说。

Using jQuery to wrap every word inside your h1 into a span will pretty much do the trick. I have no clue how it affects SEO though to be honest.

这是我使用，当我需要实现这一点。

This is what i'm using when i need to achieve this.

$("h1").each(function() 
    {
        var headerContent = $(this).text().split(' ');

        for (var i = 1; i < headerContent.length; i++) 
        {
            headerContent[i] = '<span class="subhead">' + headerContent[i] + '</span>';
        }

        $(this).html(headerContent.join(' '));
    }
);

http://jsfiddle.net/Cnuzh/

我想我实际上是从一个类似的问题的答案这里stackoverflow一个回来。如果是这样，我会将链接发布到原作者。我明天会考虑，但首先我需要我的温暖的床^^

I think i actually got this from an answer from a similar question here on stackoverflow a while back. I'll post the link to the original author if this is the case. I shall look into it tomorrow, but first i need my nice warm bed ^^

希望它有帮助，

WJ

这篇关于CSS - 对两行内联元素应用填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！