diff --git a/src/lib/components/documents/Header.svelte b/src/lib/components/documents/Header.svelte
index 39237be7b..f25af09b7 100644
--- a/src/lib/components/documents/Header.svelte
+++ b/src/lib/components/documents/Header.svelte
@@ -64,6 +64,7 @@
     font-weight: var(--font-semibold);
     font-size: var(--font-xl);
     line-height: 1.2;
+    word-break: break-all;
   }
   .access {
     flex: 0 1 auto;
diff --git a/src/lib/components/documents/stories/Header.stories.svelte b/src/lib/components/documents/stories/Header.stories.svelte
index 231a66d46..6eebccb6d 100644
--- a/src/lib/components/documents/stories/Header.stories.svelte
+++ b/src/lib/components/documents/stories/Header.stories.svelte
@@ -32,3 +32,14 @@
   name="With HTML description"
   args={{ document: { ...document, description: html } }}
 />
+
+<Story
+  name="With Long Title"
+  args={{
+    document: {
+      ...document,
+      title:
+        "This%20is%20an%20unbroken%20title%20that%20just%20goes%20on%20and%20on%20and%20on%20why%20did%20nobody%20edit%20it%3F",
+    },
+  }}
+/>