html - 带有背景颜色和填充的内联标题

Question

我正在尝试确定是否有一种方法可以使用背景颜色来设置跨越多行的内联标题的样式。

我遇到的问题是padding任何换行的行都被破坏了。

例子

CSS 和 HTML

h1 {
  display: inline;
  padding: 20px;
  background: purple;

  font-family: sans-serif;
  color: #fff;
  line-height: 60px;
}

<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel scelerisque neque.</h1>

这是我的小提琴的链接

任何帮助，将不胜感激

Answer 1

在查看image您发布的内容后，这是我提出的解决方案：

CSS 和 HTML

.header-container{
  position: relative;
  background: purple;
  overflow: hidden;
  padding: 20px;
}
h1 {
  display: inline;
  font-family: sans-serif;
  color: #fff;
  line-height: 60px;
}
h1:after{
  content: '';
  width: 100%;
  background-color: #fff; /*your page bg color*/
  height: 50px;
  position: absolute;
  bottom: 0;
  margin-left: 20px;
}

<div class="header-container">
  <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel scelerisque neque.</h1>
</div>

这是更新的JSFiddle

Answer 2

为什么不把它包在一个container有填充的地方？然后从h1.

CSS 和 HTML

div {
  padding:20px;
}
h1 {
  display: inline;
  background: purple;
  font-family: sans-serif;
  color: #fff;
}

<div>
  <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel scelerisque neque</h1>
</div>

这是一个工作示例：http: //jsfiddle.net/hMMxM/5/

Answer 3

尝试

http://jsfiddle.net/hMMxM/10/

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