diff --git a/bookmarks/styles/bookmark-details.css b/bookmarks/styles/bookmark-details.css
index 0dad87d..303f8e3 100644
--- a/bookmarks/styles/bookmark-details.css
+++ b/bookmarks/styles/bookmark-details.css
@@ -1,5 +1,13 @@
 /* Common styles */
 .bookmark-details {
+  .title {
+    word-break: break-word;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 5;
+    overflow: hidden;
+  }
+
   & .weblinks {
     display: flex;
     flex-direction: column;
diff --git a/bookmarks/templates/bookmarks/details/modal.html b/bookmarks/templates/bookmarks/details/modal.html
index 2773077..2937ed7 100644
--- a/bookmarks/templates/bookmarks/details/modal.html
+++ b/bookmarks/templates/bookmarks/details/modal.html
@@ -3,7 +3,7 @@
   <div class="modal-overlay"></div>
   <div class="modal-container" role="dialog" aria-modal="true">
     <div class="modal-header">
-      <h2>{{ details.bookmark.resolved_title }}</h2>
+      <h2 class="title">{{ details.bookmark.resolved_title }}</h2>
       <button class="close" aria-label="Close dialog">
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
              stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">