CSS padding automatic linebreak

Question

I've following html:

<div class="container">
  <div class="header">
    <h1>
        a very long long long, really very very long headline ...
    </h1>
  </div>
</div>

and following css:

.container{
  width:200px;
}

.header h1{
  background-color: #e0e0e0;
  display: inline;
  padding: 2px 8px;
  color: black;
  font-size: 16px;
  font-weight: normal;
  line-height: 30px;
}

问题是，由于包装容器的长标题和小宽度，浏览器添加了换行符。没关系。但是 padding-left 不会添加到断开的第二行和更多行中。我可以使用负文本缩进和正填充左到 .header 来做到这一点。但是背景颜色不会向左移动，因此似乎仍然存在零填充。

我怎样才能改变这个？有什么技巧可以用吗？

伟大的问候，福尔克

Answer 1

尝试更改display: inline;为display: inline-block;.

据我了解，内联元素的左右填充将应用于元素的开头和结尾，无论它们之间是否有任何换行符。在块（或内联块）元素上，填充应用于整个元素的左侧和右侧。

有关更多信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/display！

Answer 2

连同您现有的内联显示：

-webkit-box-decoration-break: clone;
box-decoration-break: clone;

请注意，这是目前没有IE /边缘支撑和实验阶段-但它工作在其他浏览器。可能是一个选择！

这是一个相当新的 CSS3 标签，在其他答案中可能还没有。