diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss
index 13afbe641..16346c97c 100644
--- a/src/components/attachment/attachment.scss
+++ b/src/components/attachment/attachment.scss
@@ -177,7 +177,8 @@
     .text {
       flex: 2;
       margin: 8px;
-      word-break: break-all;
+      overflow-wrap: break-word;
+      text-wrap: pretty;
 
       h1 {
         font-size: 1rem;
diff --git a/src/components/chat_list_item/chat_list_item.scss b/src/components/chat_list_item/chat_list_item.scss
index 9711b41d6..dcef6380e 100644
--- a/src/components/chat_list_item/chat_list_item.scss
+++ b/src/components/chat_list_item/chat_list_item.scss
@@ -17,7 +17,6 @@
     width: 100%;
     box-sizing: border-box;
     overflow: hidden;
-    word-wrap: break-word;
   }
 
   .heading {
diff --git a/src/components/chat_title/chat_title.vue b/src/components/chat_title/chat_title.vue
index 0213b86fb..72660cca0 100644
--- a/src/components/chat_title/chat_title.vue
+++ b/src/components/chat_title/chat_title.vue
@@ -39,7 +39,6 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     display: inline;
-    word-wrap: break-word;
     overflow: hidden;
   }
 
diff --git a/src/components/draft/draft.vue b/src/components/draft/draft.vue
index 9f8d8c14e..433ebae31 100644
--- a/src/components/draft/draft.vue
+++ b/src/components/draft/draft.vue
@@ -127,7 +127,6 @@
     max-width: 100%;
 
     p {
-      word-wrap: break-word;
       white-space: normal;
       overflow-x: hidden;
     }
diff --git a/src/components/flash/flash.vue b/src/components/flash/flash.vue
index 3196e9bc4..57de5b2ee 100644
--- a/src/components/flash/flash.vue
+++ b/src/components/flash/flash.vue
@@ -72,7 +72,6 @@
     flex: 1 1 0;
     line-height: 1.2;
     white-space: normal;
-    word-wrap: normal;
   }
 
   .hidden {
diff --git a/src/components/link-preview/link-preview.vue b/src/components/link-preview/link-preview.vue
index 5ef63a51e..18fc77df4 100644
--- a/src/components/link-preview/link-preview.vue
+++ b/src/components/link-preview/link-preview.vue
@@ -68,7 +68,8 @@
     margin: 0.5em 0 0;
     overflow: hidden;
     text-overflow: ellipsis;
-    word-break: break-all;
+    overflow-wrap: break-word;
+    text-wrap: pretty;
     line-height: 1.2em;
 
     /* cap description at 3 lines, the 1px is to clean up some stray pixels
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index 1247aa739..5cc8c50a3 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -170,7 +170,8 @@ $modal-view-button-icon-margin: 0.5em;
     min-height: 1em;
     max-width: 500px;
     max-height: 9.5em;
-    word-break: break-all;
+    overflow-wrap: break-word;
+    text-wrap: pretty;
   }
 
   .modal-image {
diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss
index 42f572941..c3261e17d 100644
--- a/src/components/mention_link/mention_link.scss
+++ b/src/components/mention_link/mention_link.scss
@@ -27,7 +27,6 @@
     top: 100%;
     left: 0;
     height: 100%;
-    word-wrap: normal;
     white-space: nowrap;
     transition: opacity 0.2s ease;
     z-index: 1;
diff --git a/src/components/mentions_line/mentions_line.scss b/src/components/mentions_line/mentions_line.scss
index b7dfbfb87..30f2422ed 100644
--- a/src/components/mentions_line/mentions_line.scss
+++ b/src/components/mentions_line/mentions_line.scss
@@ -1,5 +1,6 @@
 .MentionsLine {
-  word-break: break-all;
+  overflow-wrap: break-word;
+  text-wrap: pretty;
 
   .mention-link:not(:first-child)::before {
     content: " ";
diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
index a0338856f..e8895ce59 100644
--- a/src/components/notification/notification.scss
+++ b/src/components/notification/notification.scss
@@ -2,8 +2,8 @@
 .Notification {
   border-bottom: 1px solid;
   border-color: var(--border);
-  word-wrap: break-word;
-  word-break: break-all;
+  overflow-wrap: break-word;
+  text-wrap: pretty;
 
   &.Status {
     /* stylelint-disable-next-line declaration-no-important */
@@ -31,8 +31,6 @@
     & .status-username,
     & .mute-thread,
     & .mute-words {
-      word-wrap: normal;
-      word-break: normal;
       white-space: nowrap;
     }
 
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index e52c25e40..79ef5b300 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -128,7 +128,6 @@
 
   .notification-details {
     min-width: 0;
-    word-wrap: break-word;
     line-height: var(--post-line-height);
     position: relative;
     overflow: hidden;
@@ -161,7 +160,8 @@
     }
 
     h1 {
-      word-break: break-all;
+      overflow-wrap: break-word;
+      text-wrap: pretty;
       margin: 0 0 0.3em;
       padding: 0;
       font-size: 1em;
diff --git a/src/components/poll/poll.scss b/src/components/poll/poll.scss
index d043eefa6..693d9898b 100644
--- a/src/components/poll/poll.scss
+++ b/src/components/poll/poll.scss
@@ -26,7 +26,8 @@
     align-items: center;
     padding: 0.1em 0.25em;
     z-index: 1;
-    word-break: break-all;
+    overflow-wrap: break-word;
+    text-wrap: pretty;
   }
 
   .result-percentage {
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index b6a7256a7..b215eaee2 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -1,8 +1,8 @@
 .Status {
   min-width: 0;
   white-space: normal;
-  word-wrap: break-word;
-  word-break: break-all;
+  overflow-wrap: break-word;
+  text-wrap: pretty;
 
   &:hover {
     --_still-image-img-visibility: visible;
@@ -92,7 +92,8 @@
 
     a {
       display: inline-block;
-      word-break: break-all;
+      overflow-wrap: break-word;
+      text-wrap: pretty;
     }
   }
 
@@ -283,7 +284,7 @@
 
     & .status-username,
     & .mute-reason {
-      word-wrap: normal;
+      
       word-break: normal;
       white-space: nowrap;
       text-overflow: ellipsis;
diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
index 56e1d7b9f..314708280 100644
--- a/src/components/status_body/status_body.scss
+++ b/src/components/status_body/status_body.scss
@@ -14,8 +14,7 @@
   & .summary {
     white-space: pre-wrap;
     overflow-wrap: break-word;
-    word-wrap: break-word;
-    word-break: break-all;
+    text-wrap: pretty;
     line-height: var(--post-line-height);
   }
 
@@ -87,7 +86,8 @@
   & .status-unhider,
   & .cw-status-hider {
     display: inline-block;
-    word-break: break-all;
+    overflow-wrap: break-word;
+    text-wrap: pretty;
     width: 100%;
     text-align: center;
   }
@@ -107,7 +107,8 @@
 
   & .status-unhider,
   & .cw-status-hider {
-    word-break: break-all;
+    overflow-wrap: break-word;
+    text-wrap: pretty;
 
     svg {
       color: inherit;