h1标签中有两行

时间:2011-07-27 14:53:37

标签: html css

我需要在一个h1标签中插入两行(而不是制作两个分开的h1标签)。

如何在h1标签内创建换行符?

6 个答案:

答案 0 :(得分:72)

使用:

<h1>Line 1 <br/> Line 2</h1>

答案 1 :(得分:20)

W3C validated方法

<h1>Line 1 <span style = "display: block;">Line 2</span></h1>

答案 2 :(得分:8)

您可以在h1内插入标记,这样您就可以执行<h1>foo<br>bar</h1>

答案 3 :(得分:4)

总结所有聪明的答案,这就是https://validator.w3.org对每个答案的回答:

已验证:

<h1>Line 1 <br/> Line 2</h1>
<h1>Line 1<br>Line 2</h1>
<h1>Line 1 <span style = "display: block;">Line 2</span></h1>

无效

<h1>
    <p>Line1</p>
    <p>Line2</p>
</h1>

原因:

  

错误:元件P不允许作为元件H1的儿童在这方面


<h1>
  <div>line1</div>
  <div>line2</div>
</h1>

原因:

  

错误:元素DIV不允许作为在这种情况下元件H1的孩子。


经过测试的代码:

<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<h1>Line 1 <br/> Line 2</h1>
<h1>Line 1<br>Line 2</h1>
<h1>
    <p>Line1</p>
    <p>Line2</p>
</h1>
<h1>Line 1 <span style = "display: block;">Line 2</span></h1>

<h1>
  <div>line1</div>
  <div>line2</div>
</h1>
</body>
</html>

答案 4 :(得分:2)

br 内的 h1 有效的标准引用

让我们教更多人阅读现行标准

4.3.6 "The h1, h2, h3, h4, h5, and h6 elements" 说:

<块引用>

内容模型:短语内容。

然后我们点击“短语内容”的定义,这会导致 3.2.5.2.5 "Phrasing content" 说:

<块引用>

短语内容是文档的文本,以及在段落内标记该文本的元素。段落内容构成段落。

...,br,...,跨度,...

所以我们看到 br 在大量的短语内容元素列表中,因此可以进入 h1

这也向我们展示了另一种选择是执行以下操作:

<h1><span>ab</span><span>cd</span></h1>

然后使用 CSS 将 span 设为 display: inline-block;

答案 5 :(得分:0)

您可以使用换行标记

<h1>heading1 <br> heading2</h1>

您也可以使用PHP

$str = "heading1 heading2 heading3";
foreach(explode(" ",$str) as $data)
{
 echo '<h1>' .  $data  . '</h1>' . '<br>';
}