标题与文本背景

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

我喜欢在类中使用这组属性来帮助我处理一些对齐问题（也是交叉浏览问题）：

.line_100{
    display:inline;
    float:left;
    height:auto;
    position:relative;
    text-align:left;
    width:100%
}

如果你想让每个短语使用一个完整的行并且你不想使用</br>，你可以在a中添加它们并调用我提到的这个css类...看看我做的jsfiddle。

Answer 2

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

  

“h1标题没有休息，没有跨度......”

第一个：仅使用标题标记h1， 第二个：帮助＆lt; a＆gt;标签

第一种选择：仅使用标题标记h1

如果限制较小，您可以利用 white-space 属性，其值为“pre-wrap”（您可以尝试其他值。我认为这样是更合适的） 它将像使用 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实例进行了攻击;

小提琴here

第二种选择：帮助＆lt; a＆gt; ：

<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;
  }

小提琴here

Answer 3

你可以使用clear：both来创建没有<br/>

的换行符

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

http://jsfiddle.net/S2m9n/1/

Answer 4

如果没有<br>，您如何指出该线应该突破的位置？或者，既然你称之为“自动”，那么代码应该如何确定中断？它可能有助于提供您想要使用的HTML，以便我们获得更好的图片。

如果你使用没有其他标签的单个h1，我猜它必须打破宽度。