Streaming live at 10am (PST)

Orphan Text Solution in Webflow

When using the paragraph or Header blocks how do you avoid orphan text? The   route, it seems doesn’t work.

Hi, @jdesign, you might try to paste this custom css into your header of your site, which may help. After pasting this code into the Header of your site, save changes and republish:


p {

-ms-word-break: break-all;
     word-break: break-all;

     /* Non standard for webkit */
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
    -ms-hyphens: auto;
        hyphens: auto;



See if that helps. The affect to the word wrap etc, is not visible until publish. Cheers, Dave

1 Like

Hmmm. Didn’t seem to help. Still ending up with a single word on a line at the end of a paragraph. You can see it on on an iPhone.

The code actually just added hyphens at almost every line.

Hi @jdesign, I searched a bit online and stumbled upon a few different ways to approach this. It you’re able to share a public link, that would help a lot! :slight_smile: if you look at it on an iPhone 5c you will see the one word on a single line at the end of a couple paragraphs.

Could you please send me your site’s read-only link so I can take a closer look? More info on read-only links here:

@thewonglv Thanks for the help. I ended up just adjusting padding a bit in some areas – means section padding isn’t 100% consistent all through the site but I don’t anyone would ever notice but me.

1 Like