diff --git a/frontend/src/app/shared/components/truncate/truncate.component.html b/frontend/src/app/shared/components/truncate/truncate.component.html
index 94208f3a4..0ec579dad 100644
--- a/frontend/src/app/shared/components/truncate/truncate.component.html
+++ b/frontend/src/app/shared/components/truncate/truncate.component.html
@@ -1,4 +1,5 @@
 <span class="truncate" [style.max-width]="maxWidth ? maxWidth + 'px' : null" [style.justify-content]="textAlign" [class.inline]="inline">
+  <div class="hidden">{{ text }}</div>
     <ng-container *ngIf="link">
       <a [routerLink]="link" class="truncate-link">
         <ng-container *ngIf="rtl; then rtlTruncated; else ltrTruncated;"></ng-container>
@@ -11,6 +12,7 @@
 </span>
 
 <ng-template #ltrTruncated>
+
   <span class="first">{{text.slice(0,-lastChars)}}</span><span class="last-four">{{text.slice(-lastChars)}}</span>
 </ng-template>
 
diff --git a/frontend/src/app/shared/components/truncate/truncate.component.scss b/frontend/src/app/shared/components/truncate/truncate.component.scss
index 315ce4e12..c5179384f 100644
--- a/frontend/src/app/shared/components/truncate/truncate.component.scss
+++ b/frontend/src/app/shared/components/truncate/truncate.component.scss
@@ -27,4 +27,17 @@
   &.inline {
     display: inline-flex;
   }
-}
\ No newline at end of file
+}
+
+.hidden { 
+  color: transparent;
+  position: absolute;
+  max-width: 300px;
+  overflow: hidden;
+}
+
+@media (max-width: 567px) {
+  .hidden {
+    max-width: 150px;
+  }
+}