diff --git a/client/src/views/fields/file.js b/client/src/views/fields/file.js
index 279df4becd..2b8dd4bd8f 100644
--- a/client/src/views/fields/file.js
+++ b/client/src/views/fields/file.js
@@ -319,9 +319,9 @@ Espo.define('views/fields/file', 'views/fields/link', function (Dep) {
             var $att = $('<div>').css('display', 'inline-block')
                                  .css('width', '100%')
                                  .css('max-width', '300px')
+                                 .append(removeLink)
                                  .append($('<span class="preview">' + preview + '</span>').css('width', 'cacl(100% - 30px)'))
-                                 .addClass('gray-box')
-                                 .append(removeLink);
+                                 .addClass('gray-box');
 
             var $container = $('<div>').append($att);
             this.$attachment.append($container);
diff --git a/frontend/less/espo/custom.less b/frontend/less/espo/custom.less
index a06d567dd6..58db5839ac 100644
--- a/frontend/less/espo/custom.less
+++ b/frontend/less/espo/custom.less
@@ -827,6 +827,7 @@ td.cell[data-name="buttons"] > .btn-group {
 
 .gray-box .preview {
     overflow: hidden;
+    overflow-wrap: break-word;
 }
 
 .attachment-preview {