1

I want to make a heading, that looks like this

enter image description here

I tried the following:

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

It works, but I want the line to break automatically within a h1, without using <span> and a <br />.

4

4 回答 4

1

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

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

如果您希望每个短语使用一个完整的行并且您不想使用</br>，您可以将每一行添加到 a 中并调用我提到的这个 css 类......看看我制作的这个jsfiddle。

于 2013-04-24T13:56:06.413 回答
1

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

“h1 标题没有中断，没有跨度......”

第一个：仅使用标题标签 h1， 第二个：帮助 <a> 标签

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

在此处输入图像描述

有一些小的限制，您可以利用值为“pre-wrap”的空白属性（您可以尝试其他值。我认为这是更合适的）它会像使用pre标签一样工作。

注意紧跟第一个标签并在同一行中开始文本。如果不是，您将在标题中获得额外的一行您将标题打破为在 pre 标签内书写。

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

对于 css，您可以避免使用 display:inline 声明，如果您愿意的话。

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 实例破解的第一行中没有右填充的小问题；

在这里摆弄

第二种选择：帮助 < a > ：

在此处输入图像描述

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

在这里摆弄

于 2013-04-24T14:25:57.793 回答
0

您可以使用 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/

于 2013-04-24T13:45:31.770 回答
0

如果没有<br>你如何指示线路应该在哪里中断？或者，既然你称它为“自动”，那么代码应该如何确定在哪里中断？提供您想要使用的 HTML 可能会有所帮助，以便我们获得更好的图片。

如果您使用没有其他标签的单个 h1，我猜它必须在宽度上中断。

于 2013-04-24T13:54:37.407 回答