diff --git a/templates/base.html b/templates/base.html
index 64e9bd6..f083d17 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -24,6 +24,16 @@
         <style>
         .highlight { box-shadow: 0 0 7px 4px #5bc0de }
         .sm-txt { font-size: 0.8rem }
+
+        /* used to force the figcaption to break long words (even without spaces) */
+        figure { display: table; }
+        figcaption {
+            display: table-caption;
+            overflow-wrap: break-word;
+            word-wrap: break-word;
+            word-break: break-word;
+            caption-side: bottom;
+        }
         </style>
 	</head>
 	<body>
diff --git a/templates/files.html b/templates/files.html
index 15f103d..a090989 100644
--- a/templates/files.html
+++ b/templates/files.html
@@ -212,7 +212,7 @@
                     {% if dirname| TopLevelFolderOf(cwd) %}
                         <figure class="px-1 dir" dir="{{dirname}}">
                             <i style="font-size:{{size|int-22}};" class="fas fa-folder"></i>
-                            <figcaption style="display: table-caption;" class="figure-caption text-center">{{obj.name}}</figcaption>
+                            <figcaption class="figure-caption text-center text-wrap text-break">{{obj.name}}</figcaption>
                         </figure class="figure">
                     {% endif %}
                 {% endif %}
