Inline Header With Background-Color & Padding

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

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/

Answer 3

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