开发者

What's the semantically correct way to break headings into lines?

I think (don't know why) that using <br/> is kind of bad...

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

Are there other suggestions?

Update One of the lines will be shorter th开发者_如何学Goan the others


There is nothing wrong with <br />.

If you want to insert a line break on a unusual place, and you actually mean a line break, then use a line break.


The usual HTML flow?

What seems to be wrong with the normal HTML flow? If your lines are too long and would like to make them shorter, you can always define width of your H1 in CSS so you don't add markup to accommodate your design. Markup should be semantic, and CSS should provide the necessary visual appearance. Hence you can add width to your H1 element and make it break the line as per set width.

h1
{
    width: 40em;
}

Also consider using text size related dimensions so you'll get better results (not too narrow not too wide) when using different head text sizes on different pages.

When <br/> is fine?

Whenever you actually need to break your heading into a new line it's of course correct to use <br/>. Don't be afraid of using it if that's what it needs to be done on your heading. But for the purposes of head line overflows breaks are not used.


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

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

See this related question:

Can CSS force a line break after each word in an element?

It's impossible in pure CSS, but with JavaScript it's possible. I'd just go for the wrapping div though.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜