diff --git a/frontend/src/assets/assignment.css b/frontend/src/assets/assignment.css
index 851f2c3b..029dec22 100644
--- a/frontend/src/assets/assignment.css
+++ b/frontend/src/assets/assignment.css
@@ -42,3 +42,8 @@
     align-items: center;
     justify-content: space-between;
 }
+
+.assignmentTopTitle {
+    white-space: normal;
+    word-break: break-word;
+}
diff --git a/frontend/src/views/assignments/StudentAssignment.vue b/frontend/src/views/assignments/StudentAssignment.vue
index ec8100da..fb81a265 100644
--- a/frontend/src/views/assignments/StudentAssignment.vue
+++ b/frontend/src/views/assignments/StudentAssignment.vue
@@ -91,7 +91,7 @@ language
                         {{ t("submitted") }}
                     </v-chip>
                 </div>
-                <v-card-title class="text-h4">{{ data.assignment.title }}</v-card-title>
+                <v-card-title class="text-h4 assignmentTopTitle">{{ data.assignment.title }}</v-card-title>
 
                 <v-card-subtitle class="subtitle-section">
                     <using-query-result
diff --git a/frontend/src/views/assignments/TeacherAssignment.vue b/frontend/src/views/assignments/TeacherAssignment.vue
index d1ff2915..aa69b048 100644
--- a/frontend/src/views/assignments/TeacherAssignment.vue
+++ b/frontend/src/views/assignments/TeacherAssignment.vue
@@ -115,7 +115,7 @@ Const {groupProgressMap} = props.useGroupsWithProgress(
                         <v-icon>mdi-delete</v-icon>
                     </v-btn>
                 </div>
-                <v-card-title class="text-h4">{{ data.assignment.title }}</v-card-title>
+                <v-card-title class="text-h4 assignmentTopTitle">{{ data.assignment.title }}</v-card-title>
                 <v-card-subtitle class="subtitle-section">
                     <using-query-result
                         :query-result="lpQueryResult"