Long word wrap issue from v2 in v3

Hi TagDivians…
just a heads up that a missing break-word option on the main post body element which was in v2 still in v3; essentially a long URL, such as a link to a book publisher site (in a book review) or similar will “break out” of the post body, when on an iPad in portrait view (where I spend a lot of time personally).

I have changed/modified as so, which solves the issue; but even a basic word-wrap: break-word; would be better than nothing.

Note in my case I’ve also been changing the default font from Verdana to the new WP 4.6 type font stack, which is quite nice on my devices.

body,
p {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 14px;
  line-height: 21px;
  color: #222222;
  
  overflow-wrap: break-word;
  word-wrap: break-word;

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

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

I’d recommend adding this with next theme update. 🙂

• This topic was modified 9 years by simchris.

HI

Thanks @Chris for your suggestion, I’ve added it on our todo list and developers will consider it for future updates.
Have a nice day!

Hi
note in my example, I ended up removing the hyphenation element as that messed up the headlines and such with hyphens !

Just adding this should help with the long URLs breaking out of the container, as you already do for the headline block/div

overflow-wrap: break-word;
word-wrap: break-word;


🙂 Thanks!