This content originally appeared on Hussein Al Hammad and was authored by Hussein Al Hammad
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-linepseudo-element. - Set a large
word-spacingthat 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.
This content originally appeared on Hussein Al Hammad and was authored by Hussein Al Hammad
Hussein Al Hammad | Sciencx (2023-03-08T00:00:00+00:00) Reverse orphan word with CSS. Retrieved from https://www.scien.cx/2023/03/08/reverse-orphan-word-with-css-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.