Is there a standard way to break a heading into multiple lines at a specific point?

Sandrina Pereira writes on Twitter:

That’s a common request from the design team on landing pages. It’s more “eye-catching” to break a big title into 2-3 lines at a specific word. Example: “Internal best practices”

So the author would like to control exactly where the heading breaks into two lines (after the first word vs. after the second word). Would you say this is a valid use-case? If yes, how can this be achieved in HTML or CSS? If there’s no standard way to do this, should there be?

Wrap “best practices” in a <span> element and give it display: block?

I think we found a pretty good solution on Twitter.

<h1>Internal &NewLine; best practices</h1>
h) {
  white-space: pre-line;


1 Like

I may just be old school but can a <br /> tag not be used in this case?

1 Like

The HTML spec says:

br elements must be used only for line breaks that are actually part of the content, as in poems or addresses.

And the MDN accessibility concerns section for the element says that assistive technologies may explicitly announce the line break, which is probably not what you want. :stuck_out_tongue:

<br> is a semantic line break, so it’s only a good fit for text blocks like addresses and poems. In my case, the line break is purely presentational (the text doesn’t fit into one line, so the text wraps into another line). I just want to be able to control where the line break occurs.

Addresses and poems are examples. Those arent the only things you can use it for. You can add an aria attribute to silence screen readers.

In addresses and poems, the line breaks are part of the content. If you remove them, the meaning of the text changes.

In my example, the line break in the heading is not part of the content. You can remove it, and the heading stays the same.

The <br> element is used when the line break is part of the content, so not in my case.

An address is often (e.g. n letterhead) printed on a single line; the semantics are that the address has different parts, often called lines

  • street address, town or city, region, country, province or state, and so on - and there is absolutely nothing semantic about a br element there, it’s just one way of formatting. Use a “line” element or the appropriate named elements if you want to facilitate further processing, if you want to capture the meaning, the semantics.

In a header, you might want a responsive line break, so you want to indicate primary and secondary conditional break points depending on te space available. HTML and CSS aren’t all that good at this today unfortunately, but you could use br elements with class attributes indicating primary or secondary, and use media queries to make the breaks conditional on the space available.

If you want phrase breaking, and there’s no secondary break concerns, you could use a span class=“phrase” and control line breaking that way. You could also use one of the “pre” variants, e.g. pre-wrap, and have a newline where you want a break.

, by the way, is woefully inadequate for poetry, as you can’t easily arrange an indent after a br element - you need a line element. HTML has never really managed to climb to the heights of poetry. There isn’t much poetry in technical documentation, and there’s no easy way t right-adjust wrapped lines with a [ separator, sharing the same line as the next if there’s room, nor any standard way to mark the author of the poem and to distinguish that from the transcriber. Dublin core, but no standard place to put it except for cite, which is itself the source of considerable confusion because of the vagueness of its specification.

So i think addresses and poetry should be taken as throw-away examples that were not at all thought out, and certainly not examples of the deep and meaningful nature of linebreaks :slight_smile:

An address can be written in one line, but then you need to use commas to separate the parts. So instead of the semantic line breaks, you use commas.

Arranging indent in poetry? I don’t think that’s a thing.

Think of it this way. If you have text in multiple lines, and you remove the line breaks, does the meaning change? It does for addresses and poetry. That’s why those line breaks are semantic. However, the meaning does not change when removing the line break in my example. That’s why my line break is not semantic, and the <br> element should therefore not be used.

The intended standard from the CSSWG is to use wrap-inside: avoid on a span:

It’s not yet implemented anywhere, though.

1 Like