[Resolved] Word wrap problem

[Volodymyr]

Example
Hello. Some of the words on the page with the site content breaks into two lines (without a hyphen). 95% of the text shows well, but the rest is a problem. For example, in the screenshot, only one point is transferred to the next line. How can i fix this? Or where to find the code responsible for the word wrap in the content of the site.
Font settings are set manually in gp settings. The page is created in the standard WordPress editor. The language is Russian, if that matters.

[David]

Hi there,

can you provide a link to your site so we can take a closer look?
You can edit your original topic and use the Site URL field to share the link privately.

[Randy]

Found this page when researching the same problem. If the OP doesn’t want to give examples, I will!

Doesn’t look like these pics will embed, but here are two examples:

1) Example in justified text:
https://prnt.sc/qk9r9i

“Amend’s” (if not “FoxTrot”) should be on the previous line, which would make this paragraph look a LOT better. So you can see it in context to “inspect” the page, it’s from https://www.honoraryunsubscribe.com/lee-salem/

2) Example in non-justified text:
https://prnt.sc/qk9sqm

I can see no reason why this wraps here. It’s from the page https://thisistrue.com/call-me-tiberius/

This does tend to happen more when wrapping around a photo or similar element. Suggestions for improvement appreciated.

Oh, and a buddy is a “Happiness Engineer” with Automattic, and he said it’s an issue with the theme, not WP core. Hence my search here.

[David]

Hi there,

This is down to the HTML, CSS and Browser support of CSS styling. GP doesn’t do anything to affect how these styles are applied or rendered.

1. The algorithms browsers use for the text-align: justify; CSS property is pretty lousy. There are other CSS properties such as text-justify: distribute; that can be used with text-align-last: left; but it has limited browser support and to be honest the results are pretty terrible.

CSS Options

a. Add Hyphens ( probably not good with a wall of text):

.entry-content {
    text-align: justify;
    word-break: break-all;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

b. Negative Word Spacing:

.entry-content {
    text-align: justify;
    word-spacing: -2px;
}

2.Inspecting the HTML in Chrome Dev Tools i can see the markup contains non-breaking spaces:

If i remove them in the browser dev tools it fixes the reflow. Never actually noticed this before but it looks like the &nbsp unicode is ‘counted’ when the browser is calculating text flow.

[Volodymyr]

In my case, the problem was in the copywriter, which used the wrong text encoding in a text editor (ANSI instead of UTF-8 for Cyrillic). When transferring text to the wordpress editor, text breaks remained. So my problem was solved.

[David]

Thanks for letting us know 🙂

[Randy]

Well that’s …bizarre (the nbsp bit). Looking at the “text” tab in the editor for the “Tiberius” page there are definitely no nbsp’s in there, yet when I highlight each space and replace it with a space, it wraps correctly. So clearly there’s something different about some “spaces” even though I can’t SEE any difference.

So, what … the … heck?!

But yeah, having “something” in there that WP interprets as added nbsp’s, then certainly there’s going to be a bunch of extra spaces in there that make wrapping wonky. So: good catch! I’ll see what I can figure out. Thanks much.

[David]

You’re welcome

[Author]

Posts