Why do these words break in strange places?

Question

Here's the live site: http://chadfraser.com/

As you can see, if you look on mobile or scale your browser window, the words break in strange places. I could add hyphens, except my client is a professional writer and doesn't want them. We shouldn't need them though - I can't figure out why the words won't just wrap with the white space.

Any thoughts would be appreciated.

Answer 1

Its because your code is assigning word-wrap: break-word; It causes the word to break in half if necessary.

Most precisely, it is been set in styles.css on line 51:

body {
    word-wrap: break-word;
    ...

So, your entire document will behave like this. Set the property to word-wrap: normal on the elements you don't want to break, or just remove this property from the body