Html CSS-跨两行对内联元素应用填充

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

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

这将产生以下结果：

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

是否有任何方法可以确保元素在文本中断的位置获得均匀的填充

非常感谢 戴夫

---

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

编辑：nvm，没有注意到白线；不愿意付出吗；而不是常规空格有帮助吗

给它一个内联块显示，确保它显示：ie7的内联

正规的

仅限ie7

---

可能

空白：nowrap

是一些解决方案。

根据这一点，这是2岁的顺便说一句，这应该发生根据

试试这个：

只要给每个单词赋予它自己的

元素，你仍然可以得到想要的效果。
如果你添加

white-space:pre-wrap;

对于您的h1，它将如下所示：


还在想办法在（i）之前添加空格

编辑：查看以下内容：

--仍然需要一种用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(''));
});

$（'h1'）。每个（函数（索引，元素）{
变量标题=$（元素），单词数组，最后一个单词，第一个部分；
word_array=heading.html（）.split（//\s+/）；//在空格上拆分
last_word=word_array.pop（）；//弹出最后一个单词
first_part=word_array.join（“”）；//将第一个单词重新连接在一起
heading.html（[first_part'，last_word'，].join（“”））；
});

工作示例：

正如您所看到的，它工作得非常完美
使用jQuery将h1中的每个单词都包装成一个范围，这将非常有效。老实说，我不知道它是如何影响搜索引擎优化的

这就是我在需要实现这一点时所使用的

$("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(' '));
    }
);

$（“h1”）。每个（函数（）
{
var headerContent=$（this.text（）.split（“”）；
对于（变量i=1；i


我想我实际上是从stackoverflow上的一个类似问题中得到的答案。如果是这样的话，我会把链接贴到原作者那里。我明天会调查的，但首先我需要一张温暖的床^^

希望有帮助

WJ
内联元素不支持填充和边距，因此将其设为块或内联块（这不是跨浏览器）
顺便说一句，你为什么要把它做成内联的？
我的老板最近喜欢在他的设计中使用这个功能，所以我不得不想出一些解决方案。幸运的是，对于我们正在做的大多数幻灯片来说，它们是用于滑块上的标题，滑块上的标题总是在两行上，所以我开始使用before和after在每行文本之前插入一行10px。我知道跨浏览器兼容性不是很好，但在IE中工作正常，看起来并不可怕

下面是一个小例子来解释它：


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

另外，很抱歉我的代码太乱。
这里还有一个技巧：

将
放在另一个div中，并给它左边框，但在它删除
css中的填充之前

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

请参见此
如果您认为效果仅在WebKit/Blink浏览器中可见，则应使用

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

这正是您想要的，如此处所示：
此处演示：

HTML

添加不间断空格（
）只会禁用换行。同样，如果内容来自CMS，用户无法添加到textLive演示中：@thirtydot-yep此网站80%的用户IE:）请查看我的。我花了好几次时间和一笔赏金才得到这份工作，但最后我终于得到了！你想要什么样的解决方案？CCS，JS，或者两者都有？这种方法的问题是内容来自Wordpress后端，谢谢你，对吧。即便如此，我还是希望这个头衔是一个好名字。不太喜欢将标题中的每个字母都包装在中。是否将整个内容包装在
中？虽然不确定这是否会产生SEO效果。是的，这会在每一端保留填充，但中断是必要的，因为这种方法意味着溢出到其父DIV之外：因为如果不是内联的，结果看起来是这样的：好吧，谢谢，这是可行的解决方案，但我想说的是成本很高，因为这是产生的标记：。这是一个严重的负面搜索引擎优化的H1。但是，天哪，这似乎是维护网站的作者实际工作的唯一方法。如果在网站上使用用户控制的
运行此操作，可能会导致HTML注入攻击。您知道使用jQuery包装最后一个单词的方法吗？感谢您的回复。更新了答案，并添加了一种将最后一个单词用西班牙语括起来的方法。这只适用于确切的短语。如果你增加了文本的长度，你仍然会遇到问题：如果你不需要支持IE7Dunno，这是一个不错的解决方案，如果它是ts的最佳解决方案，但它确实帮助了我！TNX对于IE，您可以使用“空白：预包装”
$("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(' '));
    }
);

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

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

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

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

.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 */
}