Inline Header With Background-Color & Padding - html

Question

I'm trying to determine if there is a way to style inline headers that span multiple lines using a background color.
The issue I'm having is with the padding is broken on any lines that wrap.
Example
CSS and 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>
Here is the link to my fiddle
Any help would be appreciated

Answer 1

After looking at the image you posted this is the solution I came up with:
CSS and 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>
Here's the updated JSFiddle

Answer 2

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

Answer 3

Why not wrap it in a container with padding? And then remove padding and line height from the h1.
CSS and 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>
Here is a working example: http://jsfiddle.net/hMMxM/5/