CSS填充自动换行符

我下面的HTML：CSS填充自动换行符

<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来做到这一点。但背景颜色不会移动到左侧，因此看起来仍然存在零填充。

我该如何改变这种情况？任何可用的技巧？

大的问候，福尔克

来源

2014-09-29 Falk

只是好奇，为什么使用'h1'标记并将其覆盖为'display：inline'？ – Harry 2014-09-29 11:43:50

'h1'标签用于将内容标识为标题。但是，根据用户/客户端的设计要求，可以将标题设置为内联框。 – 2014-09-29 11:52:50

刚刚删除'display：inline' – 2014-09-29 11:54:03

尝试改变display: inline;到display: inline-block;。

据我所知，内联元素的左右填充将应用于元素的开始和结束，而不管是否存在任何换行符。在块（或内嵌块）元素上，填充应用于整个元素的左侧和右侧。

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

来源

2014-09-29 11:43:24

但是然后我会得到一个完整的块。但我想有不同长度的线条。像文字一样有长度。所以我必须手动分割标题？但接下来我可能会有三次h1。没有意义，或者我将不得不添加一个h1，其余的只是添加一个自己的类。复杂。 – Falk 2014-10-02 12:41:05

啊，我现在看到了问题。事实证明，没有简单的方法来做到这一点。见http://css-tricks.com/multi-line-padded-text/ - 我喜欢“马修彭内尔的三元素法”，尽管如果你很高兴不支持IE，那么“亚当坎贝尔的盒装装饰休息法”更好。 – 2014-10-02 13:28:36

感谢Olly！上面的评论是有帮助的！ – Falk 2014-10-07 21:52:15

除了现有的显示器直插式：

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

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

这是一个相当新的CSS3标签，在其他答案时可能无法使用。

来源

2016-09-11 10:54:09 tsc

CSS填充自动换行符

回答

相关问题