css - 带文本背景的标题

Question

我想做一个标题，看起来像这样

我尝试了以下方法:

HTML

<span class="header">Hallo</span><br /><span class="header">und Willkommen</span>       

CSS:

span.header {
    background: #404040;
    color: #fff;
    display: inline;
    line-height: 43px;
    padding: 5px 10px;
    font-size: 24px;
    text-transform: uppercase;
}

有效，但我希望该行在 h1 内自动中断, 不使用 <span>和一个 <br /> .

Answer 1

我建议使用上述限制的两种替代解决方案

"h1 heading without breaks and without span..."

第一个:只使用标题标签 h1 ， 第二个:帮助标签

第一种选择:仅使用标题标签 h1

有一些小限制，您可以利用值为 "pre-wrap" 的 white-space 属性(您可以尝试其他值。我认为这是更合适) 它将像使用 pre 标签一样工作。

注意在第一个标签之后并在同一行中立即开始文本。如果不是，你会在标题中多一行 您将标题打断为在 pre 标记内书写。

<div>
   <h class="header">HALLO&nbsp;
 UND WILLKOMMEN</h>   
</div>

对于 css，您可以避免显示:内联声明，如果您愿意的话。

h.header{
    background: #404040;
    color: #fff;
    /* display:inline;*/
    line-height: 43px;
    padding: 5px 10px;
    font-size: 24px;
    text-transform: uppercase;
    white-space:pre-wrap;
  }

我用 nbsp 实例破解了第一行中缺少正确填充的小问题；

fiddle here

第二种选择:帮助:

<div>
   <h1 class="header">
       <a>HALLO</a>
       <a>UND WILLKOMMEN</a>
    </h1>   
</div>

为了保留原来的 .header 类，我只将显示修改为表格，而不是顶部和底部的填充，我包含了边距声明

h1.header a{
    background: #404040;
    color: #fff;
    display:table;
    line-height: 43px;
    padding: 0px 10px;
    margin:5px;
    font-size: 24px;
    text-transform: uppercase;
  }

fiddle here