diff --git a/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss b/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss
index 9f161779f..1d64d9e8c 100644
--- a/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss
+++ b/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss
@@ -9,9 +9,7 @@
 
         .ion-text-wrap ion-label {
             .item-heading, h2, p {
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
+                @include ellipsis();
             }
         }
     }
diff --git a/src/addons/block/timeline/components/events/events.scss b/src/addons/block/timeline/components/events/events.scss
index 709f503bd..16fdec4a5 100644
--- a/src/addons/block/timeline/components/events/events.scss
+++ b/src/addons/block/timeline/components/events/events.scss
@@ -52,8 +52,7 @@ h4.core-bold {
         flex-wrap: wrap;
 
         & > span {
-            overflow: hidden;
-            text-overflow: ellipsis;
+            @include ellipsis();
         }
 
     }
diff --git a/src/addons/messages/messages-common.scss b/src/addons/messages/messages-common.scss
index da75d7348..20a561db1 100644
--- a/src/addons/messages/messages-common.scss
+++ b/src/addons/messages/messages-common.scss
@@ -46,9 +46,7 @@
         }
 
         .addon-message-last-message-text {
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
+            @include ellipsis();
             flex-shrink: 1;
         }
     }
diff --git a/src/addons/messages/pages/discussion/discussion.scss b/src/addons/messages/pages/discussion/discussion.scss
index 8a1e2dd70..b0936e504 100644
--- a/src/addons/messages/pages/discussion/discussion.scss
+++ b/src/addons/messages/pages/discussion/discussion.scss
@@ -51,9 +51,7 @@
             }
 
             core-format-text {
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
+                @include ellipsis();
                 flex-shrink: 1;
                 display: block;
             }
diff --git a/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.scss b/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.scss
index eee2a95b4..0160b497f 100644
--- a/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.scss
+++ b/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.scss
@@ -1,10 +1,11 @@
+@use "theme/globals" as *;
+
 :host {
     .addon-mod_h5pactivity-table-header {
         font-weight: bold;
 
         ion-col {
-            overflow: hidden;
-            text-overflow: ellipsis;
+            @include ellipsis();
         }
     }
 
diff --git a/src/addons/mod/h5pactivity/pages/users-attempts/users-attempts.scss b/src/addons/mod/h5pactivity/pages/users-attempts/users-attempts.scss
index 4f70d0bdd..68eda35cb 100644
--- a/src/addons/mod/h5pactivity/pages/users-attempts/users-attempts.scss
+++ b/src/addons/mod/h5pactivity/pages/users-attempts/users-attempts.scss
@@ -1,6 +1,7 @@
+@use "theme/globals" as *;
+
 :host {
     .addon-mod_h5pactivity-table-header ion-col {
-        overflow: hidden;
-        text-overflow: ellipsis;
+        @include ellipsis();
     }
 }
diff --git a/src/addons/notifications/pages/list/list.scss b/src/addons/notifications/pages/list/list.scss
index 979f8c2d8..645c86029 100644
--- a/src/addons/notifications/pages/list/list.scss
+++ b/src/addons/notifications/pages/list/list.scss
@@ -7,11 +7,7 @@ ion-item.addon-notification-item {
         margin-bottom: 8px;
         p.item-heading {
             font-size: var(--text-size);
-            -webkit-line-clamp: 3;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            -webkit-box-orient: vertical;
-            display: -webkit-box;
+            @include ellipsis(3);
         }
         p {
             font-size: 12px;
diff --git a/src/core/components/combobox/combobox.scss b/src/core/components/combobox/combobox.scss
index 320805a35..a42acf707 100644
--- a/src/core/components/combobox/combobox.scss
+++ b/src/core/components/combobox/combobox.scss
@@ -63,11 +63,11 @@
         --padding-bottom: 8px;
 
         background: var(--background);
+
+        --color: var(--core-combobox-color);
         color: var(--color);
-        text-overflow: ellipsis;
-        white-space: nowrap;
+
         min-height: var(--a11y-sizing-minTargetSize);
-        overflow: hidden;
         box-shadow: var(--box-shadow);
 
         --highlight-color: transparent !important;
@@ -121,7 +121,6 @@
     }
 
     ion-button {
-        --color: var(--core-combobox-color);
         --color-activated: var(--core-combobox-color);
         --color-focused: currentcolor;
         --color-hover: currentcolor;
@@ -130,9 +129,7 @@
 
         .select-text {
             @include margin-horizontal(null, auto);
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
+            @include ellipsis();
             font: var(--mdl-typography-label-font-lg);
         }
 
diff --git a/src/core/components/message/message.scss b/src/core/components/message/message.scss
index f8395258c..ce49669aa 100644
--- a/src/core/components/message/message.scss
+++ b/src/core/components/message/message.scss
@@ -67,9 +67,7 @@
                     flex-grow: 1;
                     padding-left: .5rem;
                     padding-right: .5rem;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
+                    @include ellipsis();
                     font-size: 16px;
                 }
             }
diff --git a/src/core/components/tabs/tabs.scss b/src/core/components/tabs/tabs.scss
index 876bc93be..ca2cae2b5 100644
--- a/src/core/components/tabs/tabs.scss
+++ b/src/core/components/tabs/tabs.scss
@@ -61,9 +61,7 @@
                     max-width: 100%;
 
                     ion-label {
-                        text-overflow: ellipsis;
-                        white-space: nowrap;
-                        overflow: hidden;
+                        @include ellipsis();
                         word-wrap: break-word;
                         max-width: 100%;
                         line-height: 1.2em;
diff --git a/src/core/features/course/components/course-format/course-format.html b/src/core/features/course/components/course-format/course-format.html
index 423cf7031..1f49076f2 100644
--- a/src/core/features/course/components/course-format/course-format.html
+++ b/src/core/features/course/components/course-format/course-format.html
@@ -31,12 +31,12 @@
         <div collapsible-footer appearOnBottom *ngIf="displayCourseIndex && (previousSection || nextSection)" slot="fixed">
             <div class="core-course-section-nav-buttons safe-area-padding-horizontal list-item-limited-width">
                 <ion-button *ngIf="previousSection" (click)="sectionChanged(previousSection)" expand="block"
-                    [attr.aria-label]="('core.previous' | translate) + ': ' + previousSection.name">
+                    [attr.aria-label]="('core.previous' | translate) + ': ' + previousSection.name" class="ion-text-nowrap">
                     <ion-icon name="fas-arrow-left" slot="start" aria-hidden="true" />
                     <core-format-text [text]="previousSection.name" contextLevel="course" [contextInstanceId]="course.id" />
                 </ion-button>
                 <ion-button *ngIf="nextSection" (click)="sectionChanged(nextSection)" expand="block"
-                    [attr.aria-label]="('core.next' | translate) + ': ' + nextSection.name">
+                    [attr.aria-label]="('core.next' | translate) + ': ' + nextSection.name" class="ion-text-nowrap">
                     <core-format-text [text]="nextSection.name" contextLevel="course" [contextInstanceId]="course.id" />
                     <ion-icon name="fas-arrow-right" slot="end" aria-hidden="true" />
                 </ion-button>
diff --git a/src/core/features/course/components/course-format/course-format.scss b/src/core/features/course/components/course-format/course-format.scss
index 8fe3690a7..6b7420c86 100644
--- a/src/core/features/course/components/course-format/course-format.scss
+++ b/src/core/features/course/components/course-format/course-format.scss
@@ -5,9 +5,6 @@
     padding-right: 8px;
 
     ion-button {
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
         flex: 1;
         margin-left: 4px;
         margin-right: 4px;
diff --git a/src/core/features/courses/components/course-list-item/course-list-item.scss b/src/core/features/courses/components/course-list-item/course-list-item.scss
index 05d8c8b74..860f74121 100644
--- a/src/core/features/courses/components/course-list-item/course-list-item.scss
+++ b/src/core/features/courses/components/course-list-item/course-list-item.scss
@@ -87,9 +87,7 @@ ion-card {
 .core-course-shortname {
     font-size: var(--shortname-size);
     color: var(--dark);
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
+    @include ellipsis();
 }
 
 ion-chip {
@@ -226,18 +224,13 @@ ion-card.core-course-list-card {
 
             // Clamp one line with ellipsis on tablet view, and 2 in mobile.
             .item-heading {
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                overflow: hidden;
+                @include ellipsis();
             }
 
             @include media-breakpoint-down(md) {
                 .item-heading {
                     // Addition lines for 2 line or multiline ellipsis
-                    display: -webkit-box !important;
-                    -webkit-line-clamp: 2;
-                    -webkit-box-orient: vertical;
-                    white-space: normal;
+                    @include ellipsis(2);
                 }
             }
 
diff --git a/src/core/features/search/components/global-search-result/global-search-result.scss b/src/core/features/search/components/global-search-result/global-search-result.scss
index bc5ac4ee8..b4fa7d514 100644
--- a/src/core/features/search/components/global-search-result/global-search-result.scss
+++ b/src/core/features/search/components/global-search-result/global-search-result.scss
@@ -1,3 +1,5 @@
+@use "theme/globals" as *;
+
 :host ion-item {
     --core-global-search-result-image-size: 40px;
     --core-global-search-result-title-color: var(--text);
@@ -52,14 +54,7 @@
         core-format-text {
             color: var(--core-global-search-result-content-color);
 
-            @supports (-webkit-line-clamp: 2) {
-                white-space: normal;
-                overflow: hidden;
-                display: -webkit-box;
-                -webkit-box-orient: vertical;
-                -webkit-line-clamp: 2;
-            }
-
+            @include ellipsis(2);
         }
 
         .result-context-wrapper {
diff --git a/src/theme/components/format-text.scss b/src/theme/components/format-text.scss
index d33aa6793..d7e304b63 100644
--- a/src/theme/components/format-text.scss
+++ b/src/theme/components/format-text.scss
@@ -620,9 +620,7 @@ core-rich-text-editor .core-rte-editor {
     .text-wrap     { white-space: normal !important; }
     .text-nowrap   { white-space: nowrap !important; }
     .text-truncate {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+        @include ellipsis();
      }
     .text-left   { text-align: left !important; }
     .text-right  { text-align: right !important; }
diff --git a/src/theme/components/ion-button.scss b/src/theme/components/ion-button.scss
index 3588db15b..5fd9e9628 100644
--- a/src/theme/components/ion-button.scss
+++ b/src/theme/components/ion-button.scss
@@ -5,13 +5,21 @@ ion-button {
     line-height: 120%;
 
     core-format-text {
-        white-space: normal;
         display: contents;
         line-height: 120%;
     }
 
-    & > * {
-        white-space: normal;
+    &.ion-text-nowrap {
+        @include ellipsis();
+
+        & > * {
+            @include ellipsis();
+
+        }
+
+        core-format-text {
+            display: block;
+        }
     }
 
     ion-spinner {
diff --git a/src/theme/components/ion-header.scss b/src/theme/components/ion-header.scss
index e006f8e80..597306033 100644
--- a/src/theme/components/ion-header.scss
+++ b/src/theme/components/ion-header.scss
@@ -61,9 +61,7 @@ ion-header.header-md {
         @include padding(0, 16px);
 
         h1, h2, .subheading {
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
+            @include ellipsis();
             margin: 0;
         }
 
diff --git a/src/theme/components/ion-item.scss b/src/theme/components/ion-item.scss
index 86eb2ec81..18ce5a72a 100644
--- a/src/theme/components/ion-item.scss
+++ b/src/theme/components/ion-item.scss
@@ -193,9 +193,7 @@ ion-toggle::part(label),
 ion-input > label {
     core-format-text,
     core-format-text > *:not(pre) {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+        @include ellipsis();
     }
 }
 
diff --git a/src/theme/helpers/custom.mixins.scss b/src/theme/helpers/custom.mixins.scss
index 22272230f..b3e49d758 100644
--- a/src/theme/helpers/custom.mixins.scss
+++ b/src/theme/helpers/custom.mixins.scss
@@ -153,6 +153,24 @@
     border: 0;
 }
 
+@mixin ellipsis($lines: 1) {
+    @if ($lines == 1) {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    } @else {
+        // Only supported on Android 124+, iOs 11+. https://caniuse.com/css-line-clamp
+        @supports (-webkit-line-clamp: 2) {
+            -webkit-line-clamp: $lines;
+            -webkit-box-orient: vertical;
+            display: -webkit-box;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: normal;
+        }
+    }
+}
+
 /**
  * Same as item-push-svg-url but admits flip-rtl
  */