具有背景顏色和填充的內聯頁眉

Question

我正在嘗試確定是否可以使用背景顏色設置跨多行的內聯標題的樣式。

我遇到的問題是padding任何行都被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(' '));
    }
);