March 8, 2023
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 Lorem3 <br>ipsum dolor sit amet4</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:
- Target the first line of the text with the
::first-line
pseudo-element. - 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.