MOBILE-4470 styles: Revisit text wrapping ellipsis

src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss

@@ -9,9 +9,7 @@
 
         .ion-text-wrap ion-label {
             .item-heading, h2, p {
-                white-space: nowrap;
+                @include ellipsis();
-                overflow: hidden;
-                text-overflow: ellipsis;
             }
         }
     }

src/addons/block/timeline/components/events/events.scss

@@ -52,8 +52,7 @@ h4.core-bold {
         flex-wrap: wrap;
 
         & > span {
-            overflow: hidden;
+            @include ellipsis();
-            text-overflow: ellipsis;
         }
 
     }

src/addons/messages/messages-common.scss

@@ -46,9 +46,7 @@
         }
 
         .addon-message-last-message-text {
-            overflow: hidden;
+            @include ellipsis();
-            text-overflow: ellipsis;
-            white-space: nowrap;
             flex-shrink: 1;
         }
     }

src/addons/messages/pages/discussion/discussion.scss

@@ -51,9 +51,7 @@
             }
 
             core-format-text {
-                overflow: hidden;
+                @include ellipsis();
-                text-overflow: ellipsis;
-                white-space: nowrap;
                 flex-shrink: 1;
                 display: block;
             }

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;
+            @include ellipsis();
-            text-overflow: ellipsis;
         }
     }
 

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;
+        @include ellipsis();
-        text-overflow: ellipsis;
     }
 }

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;
+            @include ellipsis(3);
-            overflow: hidden;
-            text-overflow: ellipsis;
-            -webkit-box-orient: vertical;
-            display: -webkit-box;
         }
         p {
             font-size: 12px;

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;
+            @include ellipsis();
-            overflow: hidden;
-            text-overflow: ellipsis;
             font: var(--mdl-typography-label-font-lg);
         }
 

src/core/components/message/message.scss

@@ -67,9 +67,7 @@
                     flex-grow: 1;
                     padding-left: .5rem;
                     padding-right: .5rem;
-                    overflow: hidden;
+                    @include ellipsis();
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
                     font-size: 16px;
                 }
             }

src/core/components/tabs/tabs.scss

@@ -61,9 +61,7 @@
                     max-width: 100%;
 
                     ion-label {
-                        text-overflow: ellipsis;
+                        @include ellipsis();
-                        white-space: nowrap;
-                        overflow: hidden;
                         word-wrap: break-word;
                         max-width: 100%;
                         line-height: 1.2em;

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>

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;

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;
+    @include ellipsis();
-    text-overflow: ellipsis;
-    overflow: hidden;
 }
 
 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;
+                @include ellipsis();
-                text-overflow: ellipsis;
-                overflow: hidden;
             }
 
             @include media-breakpoint-down(md) {
                 .item-heading {
                     // Addition lines for 2 line or multiline ellipsis
-                    display: -webkit-box !important;
+                    @include ellipsis(2);
-                    -webkit-line-clamp: 2;
-                    -webkit-box-orient: vertical;
-                    white-space: normal;
                 }
             }
 

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) {
+            @include ellipsis(2);
-                white-space: normal;
-                overflow: hidden;
-                display: -webkit-box;
-                -webkit-box-orient: vertical;
-                -webkit-line-clamp: 2;
-            }
-
         }
 
         .result-context-wrapper {

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;
+        @include ellipsis();
-        text-overflow: ellipsis;
-        white-space: nowrap;
      }
     .text-left   { text-align: left !important; }
     .text-right  { text-align: right !important; }

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%;
     }
 
+    &.ion-text-nowrap {
+        @include ellipsis();
+
         & > * {
-        white-space: normal;
+            @include ellipsis();
+
+        }
+
+        core-format-text {
+            display: block;
+        }
     }
 
     ion-spinner {

src/theme/components/ion-header.scss

@@ -61,9 +61,7 @@ ion-header.header-md {
         @include padding(0, 16px);
 
         h1, h2, .subheading {
-            text-overflow: ellipsis;
+            @include ellipsis();
-            white-space: nowrap;
-            overflow: hidden;
             margin: 0;
         }
 

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;
+        @include ellipsis();
-        overflow: hidden;
-        text-overflow: ellipsis;
     }
 }
 

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
  */