Geek Answers Handbook

What is the semantically correct way to split headings into lines?

simple question!

I think (I don’t know why) that using <br/> is not good ...

 <h1>My<br/> multiline header - notice only first<br/> line contains short word</h1>

Are there any other suggestions?

Update case is one of the lines will be extra short [er], and then the other

+7
source share
3 answers

There is nothing wrong with that.

If you want to insert a line break in an unusual place, and you really mean a line break, then use a line break.

+25
source

Plain HTML stream?

What is apparently wrong with a normal HTML stream? If your lines are too long and want to make them shorter, you can always define the width of your H1 in CSS so that you don't add markup for your design. The markup should be semantic, and CSS should provide the necessary appearance. Therefore, you can add a width to your H1 element and make it break the line according to the set width.

 h1 { width: 40em; }

Also consider font size related sizes to get better results (not too narrow, not too wide) when using different sizes of text on different pages.

When is <br/> excellent?

Whenever you really need to break your headline into a new line, of course, it's correct to use <br/> . Do not be afraid to use it if necessary in your heading. But for the purpose of overflowing partitions, chapters are not used.

+4
source

You shouldn't use <br /> in a tag, probably the best way would be to contain it in a div that wraps the text H1:

 <div style="width:50px;"> <h1>My multiline header wraps now without br tags!</h1> </div>

See this question:

Can CSS force line breaks after every word in an element?

This is not possible in pure CSS, but with JavaScript it is possible. I would just go for a wrapper div though.

+2
source

More articles:


All Articles