[ACCEPTED]-What's the semantically correct way to break headings into lines?-html
There is nothing wrong with <br />.
If you want to insert a line break on a 2 unusual place, and you actually mean a line 1 break, then use a line break.
The usual HTML flow?
What seems to be wrong with the normal HTML 18 flow? If your lines are too long and would 17 like to make them shorter, you can always 16 define width of your H1 in CSS so you don't 15 add markup to accommodate your design. Markup 14 should be semantic, and CSS should provide 13 the necessary visual appearance. Hence you 12 can add width to your H1 element and make 11 it break the line as per set width.
h1
{
width: 40em;
}
Also 10 consider using text size related dimensions 9 so you'll get better results (not too narrow 8 not too wide) when using different head 7 text sizes on different pages.
When <br/> is fine?
Whenever you 6 actually need to break your heading into 5 a new line it's of course correct to use 4 <br/>. Don't be afraid of using it if that's 3 what it needs to be done on your heading. But 2 for the purposes of head line overflows 1 breaks are not used.
You shouldn't use <br />'s in the tag probably, the 5 best way would be to contain it in a div 4 that will wrap the H1 text:
<div style="width:50px;">
<h1>My multiline header wraps now without br tags!</h1>
</div>
See this related 3 question:
Can CSS force a line break after each word in an element?
It's impossible in pure CSS, but 2 with JavaScript it's possible. I'd just 1 go for the wrapping div though.
More Related questions
We use cookies to improve the performance of the site. By staying on our site, you agree to the terms of use of cookies.