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>

Here is the link to my fiddle

任何帮助将不胜感激

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

Inline Header with Background-Color＆amp;填充

3 个答案: