Reverse orphan word with CSS

An "orphan word" in typography refers to a word that sits alone on the last line of a sentence. I don't know if there's a known term of the reverse of this, but it is something I needed to enforce in past projects: the first word of a sentence to sit alone on the first line.

One way to achieve this is to add the line break <br> element after the first word:

1<h1>
2 Lorem
3 <br>ipsum dolor sit amet
4</h1>

This is easy to do if you are hardcoding the content. It is certainly achievable with a scripting language if your content is dynamic, but there's also a simple and practical CSS approach:

  1. Target the first line of the text with the ::first-line pseudo-element.
  2. Set a large word-spacing that no two words can fit in a single line
1.reverse-orphan::first-line {
2 word-spacing: 100vw;
3}

You can now apply specific styles to the first word by styling the first line:

1.reverse-orphan::first-line {
2 /* make it on its own */
3 word-spacing: 100vw;
4 
5 /* style it how you wish */
6 text-transform: uppercase;
7 font-family: monospace;
8 color: tomato;
9}

See the Pen Reverse orphan word (alone on first line) by Hussein Al Hammad (@hus_hmd) on CodePen.

I realise there are multi-part names (and probably words) in some languages and you'd prefer to keep the full word on the first line. The above approach has no awareness of that; so use wisely.