Try to more intelligently break up long messages.

Use break-word in long URLs but not otherwise.

css/converse.css

@@ -8402,19 +8402,23 @@ body.reset {
       whitespace: nowrap; }
   #conversejs .message.chat-msg .chat-msg-content {
     margin-left: 0.5rem;
-    word-wrap: break-word;
     width: 100%; }
   #conversejs .message.chat-msg.headline .chat-msg-content {
     margin-left: 0; }
   #conversejs .message.chat-msg .chat-msg-text {
     padding: 0;
-    color: #666;
-    word-wrap: break-word;
-    word-break: break-all; }
+    color: #666; }
+    #conversejs .message.chat-msg .chat-msg-text a {
+      word-wrap: break-word;
+      word-break: break-all; }
     #conversejs .message.chat-msg .chat-msg-text .emojione {
       margin-bottom: -6px; }
-  #conversejs .message.chat-msg .chat-msg-media audio {
-    width: 100%; }
+  #conversejs .message.chat-msg .chat-msg-media {
+    margin-top: 0.25rem; }
+    #conversejs .message.chat-msg .chat-msg-media a {
+      word-wrap: break-word; }
+    #conversejs .message.chat-msg .chat-msg-media audio {
+      width: 100%; }
   #conversejs .message.chat-msg .avatar {
     margin-top: 0.5em;
     background: #818479;

css/inverse.css

@@ -8590,19 +8590,23 @@ body {
       whitespace: nowrap; }
   #conversejs .message.chat-msg .chat-msg-content {
     margin-left: 0.5rem;
-    word-wrap: break-word;
     width: 100%; }
   #conversejs .message.chat-msg.headline .chat-msg-content {
     margin-left: 0; }
   #conversejs .message.chat-msg .chat-msg-text {
     padding: 0;
-    color: #666;
-    word-wrap: break-word;
-    word-break: break-all; }
+    color: #666; }
+    #conversejs .message.chat-msg .chat-msg-text a {
+      word-wrap: break-word;
+      word-break: break-all; }
     #conversejs .message.chat-msg .chat-msg-text .emojione {
       margin-bottom: -6px; }
-  #conversejs .message.chat-msg .chat-msg-media audio {
-    width: 100%; }
+  #conversejs .message.chat-msg .chat-msg-media {
+    margin-top: 0.25rem; }
+    #conversejs .message.chat-msg .chat-msg-media a {
+      word-wrap: break-word; }
+    #conversejs .message.chat-msg .chat-msg-media audio {
+      width: 100%; }
   #conversejs .message.chat-msg .avatar {
     margin-top: 0.5em;
     background: #818479;

sass/_messages.scss

@@ -93,7 +93,6 @@
             }
             .chat-msg-content {
                 margin-left: 0.5rem;
-                word-wrap: break-word;
                 width: 100%;
             }
             &.headline {
@@ -105,15 +104,20 @@
             .chat-msg-text {
                 padding: 0;
                 color: $message-text-color;
-                word-wrap: break-word;
-                word-break: break-all;
-
+                a {
+                    word-wrap: break-word;
+                    word-break: break-all;
+                }
                 .emojione {
                     margin-bottom: -6px;
                 }
             }
             
             .chat-msg-media {
+                margin-top: 0.25rem;
+                a {
+                    word-wrap: break-word;
+                }
                 audio {
                     width: 100%;
                 }