两行标题的填充答案

【问题标题】：Padding for two-lined headline两行标题的填充
【发布时间】：2014-03-26 20:41:24
【问题描述】：

这有点难以解释，如果有人知道更好的标题，请改一下。

我想在标题后面画一个黑框。我正在使用 h-tag 内的跨度来执行此操作。它需要在左侧和右侧进行一点填充。我的布局是响应式的，所以标题很可能分成两行。

    <div class="headline-black">
        <h1 class="entry-title">
             <span>Some very, very long headline, that is very, very long.</span>
        </h1>
    </div>


h1 span {
    background: none repeat scroll 0 0 #000000;
    line-height:44px;
    padding:7px 25px 8px 25px;
}

.headline-black h1 {
    color: #FFFFFF;
    font-size: 22px;
}

问题：填充只影响跨度的结束和开始。在标题被破坏的地方，字母接触到框的边框。

我希望这是可以理解的。这是小提琴。试着把窗户变小，观察它的行为。

http://jsfiddle.net/832u8/2/

编辑：我希望它的形状像文本。就像你用毡尖做标记一样。但是每行都有填充。

【问题讨论】：

标签： css padding html

【解决方案1】：

我假设您希望它以这种方式分成“两条黑线”？因为如果您只想要标题的黑色背景，并且保留填充，那么这个简化版本将起作用：

<h1 class="entry-title">Some very, very long headline, that is very, very long.</h1>

h1 {
  background: #000;
  line-height:33px;
  padding: 8px 25px;
  color: #fff
}

更新小提琴：http://jsfiddle.net/kWgD2/

【讨论】：

【解决方案2】：

这是我能得到的最接近的......真的很老套，我想你自己需要一些 JS :(

此通过：

<h1 class="entry-title"><span id="Title"><span>Some very, very long headline, that is very, very long.</span></span></h1>


#Title {
 border-left: 20px solid #000;
 display:block;
 color: #fff;
}

#Title:after {
 content:'';
 display:inline-block;
 width: 20px;
 background: #000;
}

#Title span {
 background: #000;
 padding-right: 20px;
 direction: rtl;
}

http://jsfiddle.net/8EDPN/

【讨论】：

【解决方案3】：

将position:relative 与左调整一起使用怎么样？如果您不手动进行调整，可能不是最好的方法，但至少它是一个纯 css 解决方案？

示例 -> http://jsfiddle.net/JnLje/358/

来自三十多点的更多信息 -> Add padding at the beginning and end of each line of text

【讨论】：

我不得不稍微修改一下，以完全符合我的需要，但这正是我想要的。谢谢！
如果有人仍然对该主题感兴趣，我找到了一篇介绍几种方法的文章：css-tricks.com/multi-line-padded-text

【解决方案4】：

您应该在 h1 上设置填充和/或将 span 设置为 inline-block http://jsfiddle.net/832u8/9/ (span inline-block)

 h1 span {
        background: none repeat scroll 0 0 #000000;
        line-height:44px;
        padding:7px 25px 8px 25px;
        display:inline-block;
    }

http://jsfiddle.net/832u8/3/（填充 h1）

.headline-black h1 {
    color: #FFFFFF;
    font-size: 22px;
padding:0 1em;
}

【讨论】：

比我有一个大黑盒子。我希望第二行的框与文本一样长，但左侧有填充。
在内联元素上，如果设置了任何 padding-right，padding-left 将仅在第一行和最后一个字母之后。您需要将每个单词包装在 span 元素中以实现您想要的效果。
有没有其他方法可以达到同样的效果？
jsfiddle.net/832u8/45 你可以使用 js 或 jQuery 来自动执行 span 操作中的这种包装。（或服务器端脚本）。
mayersdesign 的答案是我的一部分，用于 h1 上的填充，您是否在寻找：全黑线？

【解决方案5】：

我最近找到了another sollution。它适用于几乎所有浏览器（没有 IE8 及以下版本），易于调整，如下所示：

HTML

<h1>
    <span class="wrap">
        <span class="inner">Du texte HTML dynamique sur plusieurs lignes avec un fond qui suit bien et des marges autour.</span>
    </span>
</h1>

CSS

h1 {
    color:#fff;
}

.wrap {
    box-shadow: -10px 0 0 10px #000, 10px 0 0 10px #000;
}

.inner {
    background: #000;
    position:relative;
}

【讨论】：