Two lines in h1 tag
Question
I need to fit two lines in one h1 tag (instead of making two separated h1 tags).
How can I create a line break inside of h1 tag?
6 answers
solution1
107 ACCPTED 2011-07-27 14:54:16
使用：
<h1>Line 1 <br/> Line 2</h1>
solution2
32 2016-03-24 23:16:32
W3C 验证的方法是
<h1>Line 1 <span style = "display: block;">Line 2</span></h1>
solution3
14 2019-02-01 19:44:02
Summarizing all clever answers, this is what https://validator.w3.org says for each one:
Validated:
<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>
Invalid
<h1>
<p>Line1</p>
<p>Line2</p>
</h1>
Reason:
Error: Element p not allowed as child of element h1 in this context
<h1>
<div>line1</div>
<div>line2</div>
</h1>
Reason:
Error: Element div not allowed as child of element h1 in this context.
Tested code:
<!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>
solution4
11 2011-07-27 14:54:44
您可以在h1插入标记，这样您就可以简单地执行<h1>foo<br>bar</h1> 。
solution5
2 2021-01-01 21:58:26
Standard quote that br inside h1 is valid
Let's teach more people to read the current standard
4.3.6 "The h1, h2, h3, h4, h5, and h6 elements" says:
Content model: Phrasing content.
Then we click the definition of "Phrasing content", which leads to 3.2.5.2.5 "Phrasing content" which says:
Phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level. Runs of phrasing content form paragraphs.
..., br, ..., span, ...
so we see that br is in the huge list of phrasing content elements, and therefore can go inside h1 .
This also shows us that another option would be to do something like:
<h1><span>ab</span><span>cd</span></h1>
and then make the span be display: inline-block; with CSS.
solution6
0 2020-07-31 23:01:20
You can use the line break tag
<h1>heading1 <br> heading2</h1>
You can also do it with PHP
$str = "heading1 heading2 heading3";
foreach(explode(" ",$str) as $data)
{
echo '<h1>' . $data . '</h1>' . '<br>';
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.