New hyphen issue – Words NOT breaking at hyphens on mobile (Safari & Chrome)

Hi all,

I've encountered a brand new issue with hyphens and line breaks: as of two days ago, lines are no longer breaking at manually inserted hyphens within words on mobile (Safari & Chrome, latest and older iOSes), despite my wanting them to. Mobile preview still shows lines breaking at hyphens (see first screenshot below). I've tried adding code, as below, to re-encourage manual hyphen breaks and no effect. I've made some interim changes on my live site (e.g., adjusting font sizes, removing necessary hyphens to allow breaks between what should be linked words) to address the worst formatting impacts while I try to figure out a proper fix, but really hoping someone can help with a solution! (For anyone inspecting my CSS, my doubled and cross-hidden sections are just a side effect of me trying to work out a solution on mobile without affecting desktop.)

Site: radicalhealing.ca/therapeuticapproach (No password)

Mobile preview:

Actual website:

@media screen and (max-width:767px) {#block-f370c3c66435eb463087 {p {
  -webkit-hyphens: manual !important;
  -moz-hyphens: manual !important;
  -ms-hyphens: manual !important;
  hyphens: manual !important;
}}
}

After two days of troubleshooting (and, of course, right after I post to the forum), I think I've found an at least interim fix (stubborn tenacity for the win!): adding 'zero width spaces' after any hyphens I want to prompt line breaks. I don't know whether this will cause other, unforeseen issues – so will wait to count my proverbial chickens 🐔 – but this has addressed the problem for now.

On a Mac:

1. Press 'Control–Command–Space Bar' to launch the 'Character Viewer'.

2. Enter 'zero' in the 'Search' field.

3. Select the blank 'ZERO WIDTH SPACE' character area (for me, it was column 2, row 3 in the 'Unicode Name' area), and click the 'Add to Favourites' button (you don't have to do this second part, but I wanted to have this character, along with 'SOFT HYPHEN' and 'NON-BREAKING HYPHEN', available to me for easy use in the future).

4. Navigate to your SS site editor and double click the zero width space wherever you'd like to insert a line break after a hyphen – this forces the browser to see the words as separate although they're connected by a hyphen.

5. You can use 'CTRL–CMD–SB' to launch the 'Character Viewer' from within the editor in the future and find your selected characters in the 'Favourites' area, keeping in mind that you won't see anything where the zero width space is, unless you click the blank area ☺️.

I'm going to hold off on marking this as solved as I want to see if any developers weigh in on what might actually be happening here (perhaps there's a less cumbersome, more stable, solution as I'm just hacking my way through). I'll update if I see any side effects!