diff --git a/gui/default/assets/css/overrides.css b/gui/default/assets/css/overrides.css
index b773cf000..043e6a924 100644
--- a/gui/default/assets/css/overrides.css
+++ b/gui/default/assets/css/overrides.css
@@ -189,6 +189,13 @@ input[type="checkbox"].extended-attributes-filter-rule-checkbox {
     word-break: break-all;
 }
 
+/* Break up long words in paragraphs only if necessary to prevent text overflow. */
+.overflow-break-word {
+    overflow-wrap: break-word;
+    /* Legacy name alias */
+    word-wrap: break-word;
+}
+
 .folder-advanced {
     padding: 1rem;
     margin-bottom: 15px;
diff --git a/gui/default/index.html b/gui/default/index.html
index 12216d485..26f4e8655 100644
--- a/gui/default/index.html
+++ b/gui/default/index.html
@@ -404,9 +404,9 @@
                     <span class="hidden-xs">{{folderStatusText(folder)}}</span>
                     <span ng-switch-when="scanning" ng-if="scanPercentage(folder.id) != undefined">({{scanPercentage(folder.id) | percent}})</span>
                     <span ng-switch-when="syncing">({{syncPercentage(folder.id) | percent}}, {{model[folder.id].needBytes | binary}}B)</span>
-		    <span class="inline-icon">
+                    <span class="inline-icon">
                       <span class="visible-xs fa fa-fw {{folderStatusIcon(folder)}}" aria-label="{{folderStatusText(folder)}}"></span>
-		    </span>
+                    </span>
                   </div>
                   <div class="panel-title-text">
                     <span tooltip data-original-title="{{folder.label.length != 0 ? folder.id : ''}}">{{folder.label.length != 0 ? folder.label : folder.id}}</span>
@@ -585,12 +585,13 @@
                       </tr>
                       <tr>
                         <th><span class="fas fa-fw fa-share-alt"></span>&nbsp;<span translate>Shared With</span></th>
-                        <td class="text-right no-overflow-ellipse word-break-all">
+                        <td class="text-right no-overflow-ellipse overflow-break-word">
                           <span ng-repeat="device in otherDevices(folder.devices)">
-                            <span ng-switch="completion[device.deviceID][folder.id].remoteState">
-                              <span ng-switch-when="notSharing" data-original-title="{{'The remote device has not accepted sharing this folder.' | translate}}" tooltip>{{deviceName(devices[device.deviceID])}}<sup>1</sup><span ng-if="!$last">,</span></span>
-                              <span ng-switch-when="paused" data-original-title="{{'The remote device has paused this folder.' | translate}}" tooltip>{{deviceName(devices[device.deviceID])}}<sup>2</sup><span ng-if="!$last">,</span></span>
-                              <span ng-switch-default>{{deviceName(devices[device.deviceID])}}<span ng-if="!$last">,</span></span>
+                            <span ng-switch="completion[device.deviceID][folder.id].remoteState"><!-- Avoid stray space...
+                           --><span ng-switch-when="notSharing" data-original-title="{{'The remote device has not accepted sharing this folder.' | translate}}" tooltip>{{deviceName(devices[device.deviceID])}}<sup>1</sup></span><!-- Avoid stray space...
+                           --><span ng-switch-when="paused" data-original-title="{{'The remote device has paused this folder.' | translate}}" tooltip>{{deviceName(devices[device.deviceID])}}<sup>2</sup></span><!-- Avoid stray space...
+                           --><span ng-switch-default>{{deviceName(devices[device.deviceID])}}</span><!-- Avoid stray space...
+                           --><span ng-if="!$last">,</span>
                             </span>
                           </span>
                         </td>
@@ -940,12 +941,13 @@
                       </tr>
                       <tr ng-if="deviceFolders(deviceCfg).length > 0">
                         <th><span class="fas fa-fw fa-folder"></span>&nbsp;<span translate>Folders</span></th>
-                        <td class="text-right no-overflow-ellipse word-break-all">
+                        <td class="text-right no-overflow-ellipse overflow-break-word">
                           <span ng-repeat="folderID in deviceFolders(deviceCfg)">
-                            <span ng-switch="completion[deviceCfg.deviceID][folderID].remoteState">
-                              <span ng-switch-when="notSharing" data-original-title="{{'The remote device has not accepted sharing this folder.' | translate}}" tooltip>{{folderLabel(folderID)}}<sup>1</sup><span ng-if="!$last">,</span></span>
-                              <span ng-switch-when="paused" data-original-title="{{'The remote device has paused this folder.' | translate}}" tooltip>{{folderLabel(folderID)}}<sup>2</sup><span ng-if="!$last">,</span></span>
-                              <span ng-switch-default>{{folderLabel(folderID)}}<span ng-if="!$last">,</span></span>
+                            <span ng-switch="completion[deviceCfg.deviceID][folderID].remoteState"><!-- Avoid stray space...
+                           --><span ng-switch-when="notSharing" data-original-title="{{'The remote device has not accepted sharing this folder.' | translate}}" tooltip>{{folderLabel(folderID)}}<sup>1</sup></span><!-- Avoid stray space...
+                           --><span ng-switch-when="paused" data-original-title="{{'The remote device has paused this folder.' | translate}}" tooltip>{{folderLabel(folderID)}}<sup>2</sup></span><!-- Avoid stray space...
+                           --><span ng-switch-default>{{folderLabel(folderID)}}</span><!-- Avoid stray space...
+                           --><span ng-if="!$last">,</span>
                             </span>
                           </span>
                         </td>