diff --git a/core/themes/olivero/css/components/breadcrumb.css b/core/themes/olivero/css/components/breadcrumb.css
index ab94bff36d..d4f49e7fa1 100644
--- a/core/themes/olivero/css/components/breadcrumb.css
+++ b/core/themes/olivero/css/components/breadcrumb.css
@@ -110,12 +110,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) {
@@ -145,9 +147,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 3b2eb29d55..e38ac0a563 100644
--- a/core/themes/olivero/css/components/breadcrumb.pcss.css
+++ b/core/themes/olivero/css/components/breadcrumb.pcss.css
@@ -48,6 +48,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);
@@ -56,14 +57,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;
   }
 }