Any information contained on this Website is not legal advice and should not be treated as such. You should always contact an attorney for help with your specific legal needs and issues. We may also earn a commission when you click links to our partners and purchase goods or services. For more information, read our Disclaimers Policy.
A ‘text widow’ is a single word that gets stranded on its own line in a heading — separated from the rest of the title by a line break. It looks wrong, disrupts the visual balance of the page, and is easy to fix with a small snippet of custom code in Webflow.
The solution
First, add an HTML ID to the text element you want to target. For a blog post title, post-title works well.
Then add the following JavaScript to your page’s Custom Code settings in the Body section:
<script>
$('#post-title').each(function() {
var wordArray = $(this).text().split(" ");
if (wordArray.length > 1) {
wordArray[wordArray.length-2] += " " + wordArray[wordArray.length-1];
wordArray.pop();
$(this).html(wordArray.join(" "));
}
});
</script>This script splits the title into an array of words, then combines the last two words with a non-breaking space ( ) between them. That forces the browser to keep them together on the same line, so a single word can never be left alone.
One thing to note: the script assumes all your blog titles are more than one word long. That’s almost always true, but worth keeping in mind if you ever publish a single-word title.
This approach is derived from a solution originally documented on CSS-Tricks, which is a reliable reference for this kind of front-end problem.
Where to add it in Webflow
In the Webflow Designer, go to Pages → [Your blog post template] → Page settings → Custom code → Before </body> tag. Paste the script there. It will run on every blog post page using that template.
If you want to apply it to a different element — a hero headline, a card title, etc. — just change #post-title to match whatever HTML ID you’ve assigned to that element.
More Webflow how-tos
If you found this useful, the Webflow blog optimisation guide covers more practical CMS and SEO setup for Webflow blogs. For Webflow projects built properly from the start, Matthew John Design handles the details so you don’t have to.
