Question

我关注了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;
}

问题是，浏览器添加了一个换行符，因为包头容器的长标题和宽度很小。没关系。但填充左边不会添加到破碎的第二行和更多行。我可以使用负文本缩进和正向填充 - 左到.header。但背景颜色不会向左移动，所以看起来仍然是零填充。

我该怎么改变？有什么技巧吗？

致以诚挚的问候，福尔克

Answer 1

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

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

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

Answer 2

与现有的display-inline一起使用：

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

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

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

CSS填充自动换行

2 个答案: