Question

我必须创建一个样式以将背景颜色和填充应用于标题元素，从而产生以下预期外观（Photoshop模型）：

http://f.cl.ly/items/1h09010w1t1I1B1q0r43/Screen%20Shot%202011-08-27%20at%2014.49.48.png

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

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

这会产生以下结果：

http://f.cl.ly/items/3b3V0M0A0c262Z3m3k3D/Screen%20Shot%202011-08-27%20at%2014.52.24.png

我在元素的开头（'S'）和最后（'e'）得到填充，但不是文本中断的地方。由于它的父DIV的宽度而发生中断。这种情况经常发生并且是必要的。

有没有办法确保元素在文本中断点处得到均匀填充？

非常感谢戴夫

编辑 - 我应该也说文本内容将通过CMS（Wordpress）显示。

Answer 1

如果您对WebKit / Blink浏览器中仅显示效果感到满意，则应使用

-webkit-box-decoration-break: clone;
box-decoration-break: clone;

这完全符合您的要求，例如：http://jsfiddle.net/Cnuzh/13/

Answer 2

如果你添加

white-space:pre-wrap;

到你的h1它看起来像这样：

enter image description here

仍然试图想出一种在（i）之前添加空间的方法！

编辑：看看这个： http://jsfiddle.net/ahmad/6qVVD/10/

- 仍需要用jQuery包装最后一个单词的方法 -

使用jQuery用span填充最后一个单词

$('h1').each(function(index, element) {
    var heading = $(element), word_array, last_word, first_part;

    word_array = heading.html().split(/\s+/); // split on spaces
    last_word = word_array.pop();             // pop the last word
    first_part = word_array.join(' ');        // rejoin the first words together

    heading.html([first_part, ' <span>', last_word, '</span>'].join(''));
});

工作示例：http://jsfiddle.net/6qVVD/12/

正如你所看到它完美运作

Answer 3

内联元素不支持填充和边距，因此使其成为块或内联块（不是跨浏览器）你为什么要用内联btw制作它？

Answer 4

我的老板最近喜欢在他的设计中使用这个功能，所以我不得不想出一些解决方案。幸运的是，对于我们正在做的大部分，它们都是Sliders上的标题，它们总是在两行上，所以我开始使用之前和之后在每行文本之前插入10px行。我知道并不是很好的跨浏览器兼容性，但是工作正常并且在IE中看起来并不令人震惊。

这里有一点jsFiddle来解释它：

http://jsfiddle.net/mP5vg/

这是我能找到的唯一纯CSS解决方案。

P.S。对不起我的杂乱代码。

Answer 5

在这里演示：http://jsfiddle.net/korigan/jzm3qu1q/1/

HTML

 <div class="wrap">
     <p class="highlight">
        <span class="text">Amet assumenda atque eos excepturi harum ipsa</span>
     </p>
 </div>

CSS

.wrap {
    width: 150px;
}
.highlight {
    color: #fff;
    display: inline;
    background: blue;
    font-size: 25px;
    font-weight: normal;
    line-height: 1.2;
}
.highlight .text {
        padding: 4px;
        box-shadow: 4px 0 0 blue, -4px 0 0 blue;
        background-color: blue;
        box-decoration-break: clone; /* For Firefox */
}

Answer 6

编辑：nvm，没注意到白线;不会给予＆amp; nbsp;而不是常规空间帮助？

~~给它一个内联块显示，一定要显示：内联ie7~~

<击>定期

h1 { display:inline-block }

~~ie7 only~~

h1 { display:inline}

Answer 7

使用jQuery将h1中的每个单词包装成一个span，几乎可以解决问题。说实话，我不知道它会如何影响搜索引擎优化。

当我需要实现这一点时，这就是我正在使用的。

$("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/

我想我实际上是从一个类似问题的回答中得到了这个问题。如果是这种情况，我会将链接发布给原作者。我明天会看一下，但首先我需要一张温暖的床^^

希望它有所帮助，

WJ

Answer 8

这是另外一个技巧：

将<H1>放在另一个div中并向左边框，但在删除<H1> css

之前的填充之前

<div id="wrap">
    <div class="fix">
       <h1>Specialists in retirement income</h1>
    </div>
</div>

CSS：

body { background:#ddd; }
#wrap { width:400px; background:white; }

h1 {
    color: #fff;
    background: #41a293;
    display: inline;
    word-spacing:10px;
    font: 30px/1.4 Arial, sans-serif;
    white-space:pre-wrap;
}

.fix {
    border-left:20px solid #41a293;
    }

请参阅此fiddle

Answer 9

也许white-space:nowrap;是一种解决方案。

Answer 10

根据这个2岁BTW的thread on WebmasterWorld，这应该根据W3 recommendations发生。

试试这个：http://jsfiddle.net/laheab/6MhDU/

只需将每个单词赋予其自己的<p>元素，您仍然可以获得所需的效果。

CSS - 将填充应用于两行内联元素

10 个答案: