CSS padding 自动换行答案

【问题标题】：CSS padding automatic linebreakCSS padding 自动换行
【发布时间】：2016-09-11 18:54:09
【问题描述】：

我已经关注了 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 不会被添加到断开的第二行和更远的行中。我可以使用负文本缩进和正向左填充到 .header 来做到这一点。但是背景颜色不会向左移动，所以看起来仍然是零填充。

我该如何改变呢？有什么技巧吗？

问候，福尔克

【问题讨论】：

只是好奇，为什么要使用h1 标签并将其覆盖为display: inline？
h1 标签用于将内容标识为标题。但是，根据用户/客户端的设计要求，可以将标题设置为内联框。
删除display:inline

标签： css padding line-breaks

【解决方案1】：

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

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

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

【讨论】：

但是我会得到一个完整的块。但我想有不同长度的线条。与文本长度相同。所以我必须手动拆分标题？但那时我可能会有三倍的h1。没有意义，否则我将不得不添加一个 h1 而其余的只是添加一个自己的类。复杂。
啊，我现在看到了问题。事实证明，没有简单的方法可以做到这一点。请参阅css-tricks.com/multi-line-padded-text - 我喜欢“Matthew Pennell 的三元素方法”，尽管如果您很高兴不支持 IE，那么“Adam Campbell 的 box-decoration-break 方法”会更好。
谢谢奥利！上面的评论很有帮助！

【解决方案2】：

连同您现有的显示内嵌：

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

请注意，它是 currently not supported by IE/Edge 和 considered experimental - 但它适用于其他浏览器。可能是一种选择！

这是一个相当新的 CSS3 标记，在其他答案时可能不可用。

【讨论】：