diff --git a/core/themes/olivero/css/components/breadcrumb.css b/core/themes/olivero/css/components/breadcrumb.css
index 323c553f2e..983be4fd1c 100644
--- a/core/themes/olivero/css/components/breadcrumb.css
+++ b/core/themes/olivero/css/components/breadcrumb.css
@@ -134,12 +134,14 @@
   overflow-x: auto;
   width: -webkit-max-content;
   width: max-content;
+  max-width: 100%;
   margin-top: 0;
   margin-bottom: 0;
   padding-top: 0;
   padding-bottom: 1.125rem;
   list-style: none;
-  white-space: nowrap
+  white-space: nowrap;
+  text-overflow: ellipsis
 }
 
 @media (min-width: 62.5rem) {
@@ -169,9 +171,9 @@
   }
 
 .breadcrumb__list {
-    overflow: visible;
-    padding-bottom: 0;
-    white-space: normal
+    overflow: hidden;
+    max-width: 100%;
+    padding-bottom: 0
 }
   }
 
diff --git a/core/themes/olivero/css/components/breadcrumb.pcss.css b/core/themes/olivero/css/components/breadcrumb.pcss.css
index 5a5566df6a..7af6625dd5 100644
--- a/core/themes/olivero/css/components/breadcrumb.pcss.css
+++ b/core/themes/olivero/css/components/breadcrumb.pcss.css
@@ -54,6 +54,7 @@
 .breadcrumb__list {
   overflow-x: auto;
   width: max-content;
+  max-width: 100%;
   margin-block: 0;
   margin-inline-start: calc(var(--sp1) * -1);
   margin-inline-end: calc(var(--sp1) * -1);
@@ -62,14 +63,15 @@
   padding-inline-end: 0;
   list-style: none;
   white-space: nowrap;
+  text-overflow: ellipsis;
 
   @media (--lg) {
-    overflow: visible;
+    overflow: hidden;
+    max-width: 100%;
     margin-inline-start: 0;
     margin-inline-end: 0;
     padding-block-end: 0;
     padding-inline-start: 0;
-    white-space: normal;
   }
 }