CSS填充自动换行

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>

以下是相关的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不会被添加到第二行及以后的行中。我可以通过将文本缩进为负值并将padding-left设置为正值来解决此问题，但是背景颜色将不会向左移动，因此看起来仍然有零填充。

如何更改此设置？有什么特殊技巧吗？

Falk祝您好运。

- Falk

---

只是好奇，为什么要使用 h1 标签并将其覆盖为 display: inline？ - Harry

h1 标签用于标识内容为标题。然而，根据用户/客户的设计要求，标题可以被样式化为内联框。 - Marc Audet

只需删除 display:inline。 - Suresh Ponnukalai

Answer 1

尝试将display: inline;更改为display: inline-block;。

据我理解，行内元素的左右填充将被应用于元素的开头和结尾，而不管中间是否有换行符。在块级（或内联块级）元素上，填充将应用于整个元素的左右两侧。

请参阅https://developer.mozilla.org/zh-CN/docs/Web/CSS/display获取更多信息！

- Olly Hodgson

---

但是这样我会得到一个完整的块。但我想要不同长度的行，与文本长度相同。所以我必须手动拆分标题吗？但那样我可能会有三个h1。没有意义，或者我必须添加一个h1和其余部分只添加自己的类。很复杂。 - Falk

啊，我现在明白问题了。事实证明，没有简单的方法可以做到这一点。请参见http://css-tricks.com/multi-line-padded-text/ - 我喜欢“Matthew Pennell的三重元素方法”，尽管如果您不支持IE，则“Adam Campbell的box-decoration-break方法”更好。 - Olly Hodgson

谢谢Olly！上面的评论很有帮助！ - Falk

Answer 2

除了您现有的 display-inline：

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

请注意，目前IE/Edge不支持该特性，而且被认为是实验性的 - 但它可以在其他浏览器上工作。这可能是一个选项！

这是一个相当新的CSS3标签，在其他答案发布之时可能还没有出现。

- tdtm