You can use a CSS media query like this:

@media only screen and (max-width: 768px) {
  .site-content {
    word-wrap: normal;
  }
}

More about media queries if you are interested: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Take care!

In your style.css file – lines 1865 – 1872 you will find hyphens defined.

.post-navigation .post-title,
.entry-title,
.comments-title {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

You might try adding hyphens:none; to those classes in your custom CSS file or plugin to eliminate the hyphens, but I’m not sure if you will experience any issue with overflow or not. Just a guess mind you.

Sjuare, when I type that in the .site-content line says invalid? I copied it exactly as posted :/

Also, I assumed you were refering to the word-wrap css rule, but haven’t had the chance to actually test the site in mobile.
There is a chance that you also need to add the rules suggested by @claytonjames. But you still need to wrap the rules into the media query if you want to change it only for a specific screen size.

I am trying to truncate my blog posts on my home page but I cannot find the truncate button – every article and video I’ve watched has shown an obvious truncate button on their post edit page but they are from a few years ago so I’m thinking maybe they’ve moved it somewhere else? Been looking for an hour, can’t find it!

Any help?

Thank you!

Take care!