diff --git a/client/src/components/highlights/HighlightSidebar.vue b/client/src/components/highlights/HighlightSidebar.vue
index 60f63ba3..cc55e8d2 100644
--- a/client/src/components/highlights/HighlightSidebar.vue
+++ b/client/src/components/highlights/HighlightSidebar.vue
@@ -13,7 +13,7 @@
       <h2 class="heading-4">Meine Markierung</h2>
       <mark
         class="paragraph highlight-sidebar__highlighted-text"
-        :class="[`highlight--${highlight.color}`]"
+        :class="[`highlight--${highlight.color}`, { 'highlight-sidebar__highlighted-text--overflow': isOverflowing }]"
         data-cy="highlight-in-sidebar"
         ref="highlightMark"
       >
@@ -112,6 +112,14 @@ const parseUrls = (text: string) => {
 const noteWithUrls = computed(() => {
   return parseUrls(note.value);
 });
+
+const isOverflowing = computed(() => {
+  const element = highlightMark.value;
+  if (element) {
+    return element.scrollHeight > element.clientHeight;
+  }
+  return false;
+});
 </script>
 
 <style scoped lang="postcss">
@@ -161,11 +169,14 @@ const noteWithUrls = computed(() => {
     text-overflow: ellipsis;
     position: relative;
     /* white-space: nowrap; */
-    &::after {
-      content: '...';
-      position: absolute;
-      right: 5px;
-      bottom: 0;
+
+    &--overflow {
+      &::after {
+        content: '...';
+        position: absolute;
+        right: 10px;
+        bottom: 0;
+      }
     }
   }