Use overflow-wrap CSS property alongside word-wrap

assets/stylesheets/components/_content.scss

@@ -154,6 +154,7 @@
   white-space: nowrap;
   overflow: hidden;
   word-wrap: normal;
+  overflow-wrap: normal;
 
   &:after {
     content: '';

assets/stylesheets/components/_mobile.scss

@@ -75,6 +75,7 @@
   ._list-item {
     white-space: normal;
     word-wrap: break-word;
+    overflow-wrap: break-word;
     border-right-width: 0;
   }
 

assets/stylesheets/components/_sidebar.scss

@@ -65,6 +65,7 @@
   font-size: .875rem;
   white-space: nowrap;
   word-wrap: normal;
+  overflow-wrap: normal;
   text-overflow: ellipsis;
   text-shadow: 0 1px rgba(white, .3);
   border: solid transparent;

assets/stylesheets/global/_base.scss

@@ -13,6 +13,7 @@ body {
   font: normal 1em/1.7 $baseFont;
   color: $textColor;
   word-wrap: break-word;
+  overflow-wrap: break-word;
   -webkit-tap-highlight-color: rgba(black, 0);
   -webkit-touch-callout: none;
   -webkit-text-size-adjust: 100%;