diff --git a/scripts/langindex.json b/scripts/langindex.json
index fa870638e..08019c959 100644
--- a/scripts/langindex.json
+++ b/scripts/langindex.json
@@ -524,15 +524,13 @@
   "addon.mod_choice.cannotsubmit": "choice",
   "addon.mod_choice.choiceoptions": "choice",
   "addon.mod_choice.errorgetchoice": "local_moodlemobileapp",
-  "addon.mod_choice.expired": "choice",
   "addon.mod_choice.full": "choice",
   "addon.mod_choice.limita": "choice",
   "addon.mod_choice.modulenameplural": "choice",
   "addon.mod_choice.noresultsviewable": "choice",
-  "addon.mod_choice.notopenyet": "choice",
   "addon.mod_choice.numberofuser": "choice",
   "addon.mod_choice.numberofuserinpercentage": "choice",
-  "addon.mod_choice.previewonly": "choice",
+  "addon.mod_choice.previewing": "choice",
   "addon.mod_choice.publishinfoanonafter": "choice",
   "addon.mod_choice.publishinfoanonclose": "choice",
   "addon.mod_choice.publishinfofullafter": "choice",
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/choice/choice.module.ts b/src/addons/mod/choice/choice.module.ts
index dbf056f0f..b09b8ab97 100644
--- a/src/addons/mod/choice/choice.module.ts
+++ b/src/addons/mod/choice/choice.module.ts
@@ -22,13 +22,13 @@ import { CoreCourseModulePrefetchDelegate } from '@features/course/services/modu
 import { CoreMainMenuTabRoutingModule } from '@features/mainmenu/mainmenu-tab-routing.module';
 import { CoreCronDelegate } from '@services/cron';
 import { CORE_SITE_SCHEMAS } from '@services/sites';
-import { AddonModChoiceProvider } from './services/choice';
 import { OFFLINE_SITE_SCHEMA } from './services/database/choice';
 import { AddonModChoiceIndexLinkHandler } from './services/handlers/index-link';
 import { AddonModChoiceListLinkHandler } from './services/handlers/list-link';
 import { AddonModChoiceModuleHandler, AddonModChoiceModuleHandlerService } from './services/handlers/module';
 import { AddonModChoicePrefetchHandler } from './services/handlers/prefetch';
 import { AddonModChoiceSyncCronHandler } from './services/handlers/sync-cron';
+import { ADDON_MOD_CHOICE_COMPONENT } from './constants';
 
 const routes: Routes = [
     {
@@ -57,7 +57,7 @@ const routes: Routes = [
                 CoreContentLinksDelegate.registerHandler(AddonModChoiceIndexLinkHandler.instance);
                 CoreContentLinksDelegate.registerHandler(AddonModChoiceListLinkHandler.instance);
 
-                CoreCourseHelper.registerModuleReminderClick(AddonModChoiceProvider.COMPONENT);
+                CoreCourseHelper.registerModuleReminderClick(ADDON_MOD_CHOICE_COMPONENT);
             },
         },
     ],
diff --git a/src/addons/mod/choice/components/index/addon-mod-choice-index.html b/src/addons/mod/choice/components/index/addon-mod-choice-index.html
index 80374ed11..fd8aa8e1d 100644
--- a/src/addons/mod/choice/components/index/addon-mod-choice-index.html
+++ b/src/addons/mod/choice/components/index/addon-mod-choice-index.html
@@ -12,32 +12,17 @@
         [courseId]="courseId" [hasDataToSync]="hasOffline" (completionChanged)="onCompletionChange()" />
 
     <!-- Activity availability messages -->
-    <ion-card class="core-info-card" *ngIf="choiceNotOpenYet">
+    <ion-card class="core-info-card" *ngIf="showPreview && options.length">
         <ion-item>
             <ion-icon name="fas-circle-info" slot="start" aria-hidden="true" />
             <ion-label>
-                <p *ngIf="options.length">{{ 'addon.mod_choice.previewonly' | translate:{$a: openTimeReadable} }}</p>
-                <p *ngIf="!options.length">{{ 'addon.mod_choice.notopenyet' | translate:{$a: openTimeReadable} }}</p>
-            </ion-label>
-        </ion-item>
-    </ion-card>
-
-    <ion-card class="core-info-card" *ngIf="choiceClosed">
-        <ion-item>
-            <ion-icon name="fas-circle-info" slot="start" aria-hidden="true" />
-            <ion-label>
-                <p *ngIf="options.length">
-                    {{ 'addon.mod_choice.yourselection' | translate }}
-                    <core-format-text [text]="options[0].text" contextLevel="module" [contextInstanceId]="module.id"
-                        [courseId]="courseId" />
-                </p>
-                <p>{{ 'addon.mod_choice.expired' | translate:{$a: closeTimeReadable} }}</p>
+                <p>{{ 'addon.mod_choice.previewing' | translate }}</p>
             </ion-label>
         </ion-item>
     </ion-card>
 
     <!-- Inform what will happen with the choices. -->
-    <ion-card class="core-info-card" *ngIf="canEdit && publishInfo && options.length">
+    <ion-card class="core-info-card" *ngIf="publishInfo && options.length">
         <ion-item>
             <ion-icon name="fas-circle-info" slot="start" aria-hidden="true" />
             <ion-label>{{ publishInfo | translate }}</ion-label>
@@ -45,24 +30,40 @@
     </ion-card>
 
     <!-- Choice options -->
-    <ion-card *ngIf="options.length && choice">
+    <ion-card *ngIf="options.length && choice && (canEdit || showPreview)">
         <ng-container *ngIf="choice.allowmultiple">
             <ion-item class="ion-text-wrap" *ngFor="let option of options">
-                <ion-checkbox [(ngModel)]="option.checked" [disabled]="option.disabled || !canEdit">
+                <ion-checkbox [(ngModel)]="option.checked" [disabled]="option.disabled || showPreview">
                     <ng-container *ngTemplateOutlet="optionLabelTemplate; context: {option: option}" />
                 </ion-checkbox>
             </ion-item>
         </ng-container>
         <ion-radio-group *ngIf="!choice.allowmultiple" [(ngModel)]="selectedOption.id">
             <ion-item class="ion-text-wrap" *ngFor="let option of options">
-                <ion-radio [value]="option.id" [disabled]="option.disabled || !canEdit">
+                <ion-radio [value]="option.id" [disabled]="option.disabled || showPreview">
                     <ng-container *ngTemplateOutlet="optionLabelTemplate; context: {option: option}" />
                 </ion-radio>
             </ion-item>
         </ion-radio-group>
     </ion-card>
+
+    <ion-card *ngIf="options.length && choice && !canEdit && !showPreview">
+        <ion-item-divider>
+            <ion-label>
+                <h2>{{ 'addon.mod_choice.yourselection' | translate }}</h2>
+            </ion-label>
+        </ion-item-divider>
+        <ng-container *ngFor="let option of options">
+            <ion-item class="ion-text-wrap" *ngIf="option.checked">
+                <ion-label>
+                    <core-format-text [text]="option.text" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
+                </ion-label>
+            </ion-item>
+        </ng-container>
+    </ion-card>
+
     <!-- Choice results -->
-    <div *ngIf="canSeeResults && choice">
+    <ng-container *ngIf="canSeeResults && choice">
         <ion-item-divider>
             <ion-label>
                 <h2>{{ 'addon.mod_choice.responses' | translate }}</h2>
@@ -115,9 +116,9 @@
                 </ion-col>
             </ion-row>
         </ion-grid>
-    </div>
+    </ng-container>
 
-    <ion-card class="core-info-card" *ngIf="!canSeeResults && !choiceNotOpenYet">
+    <ion-card class="core-info-card" *ngIf="!canSeeResults && showResultsMessage">
         <ion-item>
             <ion-icon name="fas-circle-info" slot="start" aria-hidden="true" />
             <ion-label>
diff --git a/src/addons/mod/choice/components/index/index.ts b/src/addons/mod/choice/components/index/index.ts
index 720cf2b88..69ac15956 100644
--- a/src/addons/mod/choice/components/index/index.ts
+++ b/src/addons/mod/choice/components/index/index.ts
@@ -26,7 +26,6 @@ import {
     AddonModChoice,
     AddonModChoiceChoice,
     AddonModChoiceOption,
-    AddonModChoiceProvider,
     AddonModChoiceResult,
 } from '../../services/choice';
 import { AddonModChoiceOffline } from '../../services/choice-offline';
@@ -37,6 +36,7 @@ import {
     AddonModChoiceSyncResult,
 } from '../../services/choice-sync';
 import { AddonModChoicePrefetchHandler } from '../../services/handlers/prefetch';
+import { ADDON_MOD_CHOICE_COMPONENT, ADDON_MOD_CHOICE_PUBLISH_ANONYMOUS, AddonModChoiceShowResults } from '../../constants';
 
 /**
  * Component that displays a choice.
@@ -47,14 +47,14 @@ import { AddonModChoicePrefetchHandler } from '../../services/handlers/prefetch'
 })
 export class AddonModChoiceIndexComponent extends CoreCourseModuleMainActivityComponent implements OnInit {
 
-    component = AddonModChoiceProvider.COMPONENT;
+    component = ADDON_MOD_CHOICE_COMPONENT;
     pluginName = 'choice';
 
     choice?: AddonModChoiceChoice;
     options: AddonModChoiceOption[] = [];
     selectedOption: {id: number} = { id: -1 };
-    choiceNotOpenYet = false;
-    choiceClosed = false;
+    showPreview = false;
+    showResultsMessage = false;
     canEdit = false;
     canDelete = false;
     canSeeResults = false;
@@ -62,13 +62,11 @@ export class AddonModChoiceIndexComponent extends CoreCourseModuleMainActivityCo
     labels: string[] = [];
     results: AddonModChoiceResultFormatted[] = [];
     publishInfo?: string; // Message explaining the user what will happen with his choices.
-    openTimeReadable?: string;
-    closeTimeReadable?: string;
 
     protected userId?: number;
     protected syncEventName = AddonModChoiceSyncProvider.AUTO_SYNCED;
     protected hasAnsweredOnline = false;
-    protected now = Date.now();
+    protected now = CoreTimeUtils.timestamp();
 
     constructor(
         protected content?: IonContent,
@@ -121,7 +119,7 @@ export class AddonModChoiceIndexComponent extends CoreCourseModuleMainActivityCo
      * @inheritdoc
      */
     protected async fetchContent(refresh?: boolean, sync = false, showErrors = false): Promise<void> {
-        this.now = Date.now();
+        this.now = CoreTimeUtils.timestamp();
 
         this.choice = await AddonModChoice.getChoice(this.courseId, this.module.id);
 
@@ -135,14 +133,7 @@ export class AddonModChoiceIndexComponent extends CoreCourseModuleMainActivityCo
             }
         }
 
-        this.choice.timeopen = (this.choice.timeopen || 0) * 1000;
-        this.choice.timeclose = (this.choice.timeclose || 0) * 1000;
-        this.openTimeReadable = CoreTimeUtils.userDate(this.choice.timeopen);
-        this.closeTimeReadable = CoreTimeUtils.userDate(this.choice.timeclose);
-
         this.description = this.choice.intro;
-        this.choiceNotOpenYet = !!this.choice.timeopen && this.choice.timeopen > this.now;
-        this.choiceClosed = !!this.choice.timeclose && this.choice.timeclose <= this.now;
 
         this.dataRetrieved.emit(this.choice);
 
@@ -171,7 +162,8 @@ export class AddonModChoiceIndexComponent extends CoreCourseModuleMainActivityCo
             options = await this.getOfflineResponses(choice, options);
         }
 
-        const isOpen = this.isChoiceOpen(choice);
+        const isOpen = AddonModChoice.choiceHasBeenOpened(choice, this.now) &&
+            !AddonModChoice.choiceHasBeenClosed(choice, this.now);
 
         this.selectedOption = { id: -1 }; // Single choice model.
         const hasAnswered = options.some((option) => {
@@ -186,30 +178,49 @@ export class AddonModChoiceIndexComponent extends CoreCourseModuleMainActivityCo
             return true;
         });
 
-        this.canEdit = isOpen && (choice.allowupdate! || !hasAnswered);
-        this.canDelete = isOpen && choice.allowupdate! && hasAnswered;
+        this.canEdit = isOpen && (!!choice.allowupdate || !hasAnswered);
+        this.canDelete = isOpen && !!choice.allowupdate && hasAnswered;
         this.options = options;
 
-        if (!this.canEdit) {
+        this.setPublishInfo(choice, hasAnswered);
+    }
+
+    /**
+     * Set publish info message.
+     *
+     * @param choice Choice data.
+     */
+    protected setPublishInfo(choice: AddonModChoiceChoice, hasAnswered: boolean): void {
+        const choiceOpen = !AddonModChoice.choiceHasBeenOpened(choice, this.now) &&
+            !AddonModChoice.choiceHasBeenClosed(choice, this.now);
+
+        if ((!choice.allowupdate && hasAnswered) || !choiceOpen) {
+            this.showPreview = false;
+            this.showResultsMessage = true;
+            this.publishInfo = '';
+
             return;
         }
 
+        this.showResultsMessage = false;
+        this.showPreview = !!choice.showpreview;
+
         // Calculate the publish info message.
         switch (choice.showresults) {
-            case AddonModChoiceProvider.RESULTS_NOT:
+            case AddonModChoiceShowResults.SHOWRESULTS_NOT:
                 this.publishInfo = 'addon.mod_choice.publishinfonever';
                 break;
 
-            case AddonModChoiceProvider.RESULTS_AFTER_ANSWER:
-                if (choice.publish == AddonModChoiceProvider.PUBLISH_ANONYMOUS) {
+            case AddonModChoiceShowResults.SHOWRESULTS_AFTER_ANSWER:
+                if (choice.publish === ADDON_MOD_CHOICE_PUBLISH_ANONYMOUS) {
                     this.publishInfo = 'addon.mod_choice.publishinfoanonafter';
                 } else {
                     this.publishInfo = 'addon.mod_choice.publishinfofullafter';
                 }
                 break;
 
-            case AddonModChoiceProvider.RESULTS_AFTER_CLOSE:
-                if (choice.publish == AddonModChoiceProvider.PUBLISH_ANONYMOUS) {
+            case AddonModChoiceShowResults.SHOWRESULTS_AFTER_CLOSE:
+                if (choice.publish === ADDON_MOD_CHOICE_PUBLISH_ANONYMOUS) {
                     this.publishInfo = 'addon.mod_choice.publishinfoanonclose';
                 } else {
                     this.publishInfo = 'addon.mod_choice.publishinfofullclose';
@@ -288,7 +299,7 @@ export class AddonModChoiceIndexComponent extends CoreCourseModuleMainActivityCo
      * @returns Resolved when done.
      */
     protected async fetchResults(choice: AddonModChoiceChoice): Promise<void> {
-        if (this.choiceNotOpenYet) {
+        if (!AddonModChoice.choiceHasBeenOpened(choice, this.now)) {
             // Cannot see results yet.
             this.canSeeResults = false;
 
@@ -310,7 +321,8 @@ export class AddonModChoiceIndexComponent extends CoreCourseModuleMainActivityCo
 
             return Object.assign(result, { percentageamountfixed: result.percentageamount.toFixed(1) });
         });
-        this.canSeeResults = hasVotes || AddonModChoice.canStudentSeeResults(choice, this.hasAnsweredOnline);
+
+        this.canSeeResults = hasVotes || AddonModChoice.canStudentSeeResults(choice, this.hasAnsweredOnline, this.now);
     }
 
     /**
@@ -326,16 +338,6 @@ export class AddonModChoiceIndexComponent extends CoreCourseModuleMainActivityCo
         this.analyticsLogEvent('mod_choice_view_choice');
     }
 
-    /**
-     * Check if a choice is open.
-     *
-     * @param choice Choice data.
-     * @returns True if choice is open, false otherwise.
-     */
-    protected isChoiceOpen(choice: AddonModChoiceChoice): boolean {
-        return (!choice.timeopen || choice.timeopen <= this.now) && (!choice.timeclose || choice.timeclose > this.now);
-    }
-
     /**
      * Return true if the user has selected at least one option.
      *
@@ -357,15 +359,17 @@ export class AddonModChoiceIndexComponent extends CoreCourseModuleMainActivityCo
      * Save options selected.
      */
     async save(): Promise<void> {
-        const choice = this.choice!;
+        if (!this.choice) {
+            return;
+        }
 
         // Only show confirm if choice doesn't allow update.
-        if (!choice.allowupdate) {
+        if (!this.choice.allowupdate) {
             await CoreDomUtils.showConfirm(Translate.instant('core.areyousure'));
         }
 
         const responses: number[] = [];
-        if (choice.allowmultiple) {
+        if (this.choice.allowmultiple) {
             this.options.forEach((option) => {
                 if (option.checked) {
                     responses.push(option.id);
@@ -378,7 +382,7 @@ export class AddonModChoiceIndexComponent extends CoreCourseModuleMainActivityCo
         const modal = await CoreDomUtils.showModalLoading('core.sending', true);
 
         try {
-            const online = await AddonModChoice.submitResponse(choice.id, choice.name, this.courseId, responses);
+            const online = await AddonModChoice.submitResponse(this.choice.id, this.choice.name, this.courseId, responses);
 
             this.content?.scrollToTop();
 
@@ -402,6 +406,10 @@ export class AddonModChoiceIndexComponent extends CoreCourseModuleMainActivityCo
      * Delete options selected.
      */
     async delete(): Promise<void> {
+        if (!this.choice) {
+            return;
+        }
+
         try {
             await CoreDomUtils.showDeleteConfirm();
         } catch {
@@ -412,7 +420,7 @@ export class AddonModChoiceIndexComponent extends CoreCourseModuleMainActivityCo
         const modal = await CoreDomUtils.showModalLoading('core.sending', true);
 
         try {
-            await AddonModChoice.deleteResponses(this.choice!.id, this.choice!.name, this.courseId);
+            await AddonModChoice.deleteResponses(this.choice.id, this.choice.name, this.courseId);
 
             this.content?.scrollToTop();
 
diff --git a/src/addons/mod/choice/constants.ts b/src/addons/mod/choice/constants.ts
new file mode 100644
index 000000000..af337952b
--- /dev/null
+++ b/src/addons/mod/choice/constants.ts
@@ -0,0 +1,29 @@
+// (C) Copyright 2015 Moodle Pty Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+export const ADDON_MOD_CHOICE_COMPONENT = 'mmaModChoice';
+
+/**
+ * Possible show results values.
+ */
+export const enum AddonModChoiceShowResults {
+    SHOWRESULTS_NOT = 0,
+    SHOWRESULTS_AFTER_ANSWER = 1,
+    SHOWRESULTS_AFTER_CLOSE = 2,
+    SHOWRESULTS_ALWAYS = 3,
+}
+
+// Possible choice publish values.
+export const ADDON_MOD_CHOICE_PUBLISH_ANONYMOUS = false;
+export const ADDON_MOD_CHOICE_PUBLISH_NAMES = true;
diff --git a/src/addons/mod/choice/lang.json b/src/addons/mod/choice/lang.json
index 7b60c3b6d..2a591be84 100644
--- a/src/addons/mod/choice/lang.json
+++ b/src/addons/mod/choice/lang.json
@@ -2,15 +2,13 @@
     "cannotsubmit": "Sorry, there was a problem submitting your choice. Please try again.",
     "choiceoptions": "Choice options",
     "errorgetchoice": "Error getting choice data.",
-    "expired": "This activity closed on {{$a}}.",
     "full": "(Full)",
     "limita": "Limit: {{$a}}",
     "modulenameplural": "Choices",
     "noresultsviewable": "The results are not currently viewable.",
-    "notopenyet": "This activity is not available until {{$a}}.",
     "numberofuser": "Number of responses",
     "numberofuserinpercentage": "Percentage of responses",
-    "previewonly": "This is just a preview of the available options for this activity. You will not be able to submit your choice until {{$a}}.",
+    "previewing": "This is just a preview of the available options for this activity. You will be able to make a choice when it opens.",
     "publishinfoanonafter": "Anonymous results will be published after you answer.",
     "publishinfoanonclose": "Anonymous results will be published after the activity is closed.",
     "publishinfofullafter": "Full results, showing everyone's choices, will be published after you answer.",
diff --git a/src/addons/mod/choice/services/choice-sync.ts b/src/addons/mod/choice/services/choice-sync.ts
index c98d270a5..7a9cf0040 100644
--- a/src/addons/mod/choice/services/choice-sync.ts
+++ b/src/addons/mod/choice/services/choice-sync.ts
@@ -23,9 +23,10 @@ import { CoreSites } from '@services/sites';
 import { CoreUtils } from '@services/utils/utils';
 import { makeSingleton } from '@singletons';
 import { CoreEvents } from '@singletons/events';
-import { AddonModChoice, AddonModChoiceProvider } from './choice';
+import { AddonModChoice } from './choice';
 import { AddonModChoiceOffline } from './choice-offline';
 import { AddonModChoicePrefetchHandler } from './handlers/prefetch';
+import { ADDON_MOD_CHOICE_COMPONENT } from '../constants';
 
 /**
  * Service to sync choices.
@@ -150,7 +151,7 @@ export class AddonModChoiceSyncProvider extends CoreCourseActivitySyncBaseProvid
         };
 
         // Sync offline logs.
-        await CoreUtils.ignoreErrors(CoreCourseLogHelper.syncActivity(AddonModChoiceProvider.COMPONENT, choiceId, siteId));
+        await CoreUtils.ignoreErrors(CoreCourseLogHelper.syncActivity(ADDON_MOD_CHOICE_COMPONENT, choiceId, siteId));
 
         const data = await CoreUtils.ignoreErrors(AddonModChoiceOffline.getResponse(choiceId, siteId, userId));
 
diff --git a/src/addons/mod/choice/services/choice.ts b/src/addons/mod/choice/services/choice.ts
index 260d1b01a..8cbe5e197 100644
--- a/src/addons/mod/choice/services/choice.ts
+++ b/src/addons/mod/choice/services/choice.ts
@@ -27,8 +27,7 @@ import { makeSingleton, Translate } from '@singletons';
 import { AddonModChoiceOffline } from './choice-offline';
 import { AddonModChoiceAutoSyncData, AddonModChoiceSyncProvider } from './choice-sync';
 import { CoreSiteWSPreSets } from '@classes/sites/authenticated-site';
-
-const ROOT_CACHE_KEY = 'mmaModChoice:';
+import { ADDON_MOD_CHOICE_COMPONENT, AddonModChoiceShowResults } from '../constants';
 
 /**
  * Service that provides some features for choices.
@@ -36,15 +35,7 @@ const ROOT_CACHE_KEY = 'mmaModChoice:';
 @Injectable({ providedIn: 'root' })
 export class AddonModChoiceProvider {
 
-    static readonly COMPONENT = 'mmaModChoice';
-
-    static readonly RESULTS_NOT = 0;
-    static readonly RESULTS_AFTER_ANSWER = 1;
-    static readonly RESULTS_AFTER_CLOSE = 2;
-    static readonly RESULTS_ALWAYS = 3;
-
-    static readonly PUBLISH_ANONYMOUS = false;
-    static readonly PUBLISH_NAMES = true;
+    protected static readonly ROOT_CACHE_KEY = 'mmaModChoice:';
 
     /**
      * Check if results can be seen by a student. The student can see the results if:
@@ -54,14 +45,41 @@ export class AddonModChoiceProvider {
      *
      * @param choice Choice to check.
      * @param hasAnswered True if user has answered the choice, false otherwise.
+     * @param timeNow Current time in seconds.
      * @returns True if the students can see the results.
      */
-    canStudentSeeResults(choice: AddonModChoiceChoice, hasAnswered: boolean): boolean {
-        const now = Date.now();
+    canStudentSeeResults(choice: AddonModChoiceChoice, hasAnswered: boolean, timeNow: number): boolean {
+        if (!this.choiceHasBeenOpened(choice, timeNow)) {
+            return false;
+        }
 
-        return choice.showresults === AddonModChoiceProvider.RESULTS_ALWAYS ||
-            choice.showresults === AddonModChoiceProvider.RESULTS_AFTER_CLOSE && choice.timeclose && choice.timeclose <= now ||
-            choice.showresults === AddonModChoiceProvider.RESULTS_AFTER_ANSWER && hasAnswered;
+        const choiceClosed = this.choiceHasBeenClosed(choice, timeNow);
+
+        return choice.showresults === AddonModChoiceShowResults.SHOWRESULTS_ALWAYS ||
+            choice.showresults === AddonModChoiceShowResults.SHOWRESULTS_AFTER_ANSWER && hasAnswered ||
+            choice.showresults === AddonModChoiceShowResults.SHOWRESULTS_AFTER_CLOSE && choiceClosed;
+    }
+
+    /**
+     * Check if a choice has been opened.
+     *
+     * @param choice Choice to check.
+     * @param timeNow Current time in seconds.
+     * @returns True if the choice open dated has passed, false otherwise.
+     */
+    choiceHasBeenOpened(choice: AddonModChoiceChoice, timeNow: number): boolean {
+        return !choice.timeopen || timeNow > choice.timeopen;
+    }
+
+    /**
+     * Check if a choice has been closed.
+     *
+     * @param choice Choice to check.
+     * @param timeNow Current time in seconds.
+     * @returns True if the choice close dated has passed, false otherwise.
+     */
+    choiceHasBeenClosed(choice: AddonModChoiceChoice, timeNow: number): boolean {
+        return !!choice.timeclose && timeNow > choice.timeclose;
     }
 
     /**
@@ -154,7 +172,7 @@ export class AddonModChoiceProvider {
      * @returns Cache key.
      */
     protected getChoiceDataCacheKey(courseId: number): string {
-        return ROOT_CACHE_KEY + 'choice:' + courseId;
+        return AddonModChoiceProvider.ROOT_CACHE_KEY + 'choice:' + courseId;
     }
 
     /**
@@ -164,7 +182,7 @@ export class AddonModChoiceProvider {
      * @returns Cache key.
      */
     protected getChoiceOptionsCacheKey(choiceId: number): string {
-        return ROOT_CACHE_KEY + 'options:' + choiceId;
+        return AddonModChoiceProvider.ROOT_CACHE_KEY + 'options:' + choiceId;
     }
 
     /**
@@ -174,7 +192,7 @@ export class AddonModChoiceProvider {
      * @returns Cache key.
      */
     protected getChoiceResultsCacheKey(choiceId: number): string {
-        return ROOT_CACHE_KEY + 'results:' + choiceId;
+        return AddonModChoiceProvider.ROOT_CACHE_KEY + 'results:' + choiceId;
     }
 
     /**
@@ -200,7 +218,7 @@ export class AddonModChoiceProvider {
         const preSets: CoreSiteWSPreSets = {
             cacheKey: this.getChoiceDataCacheKey(courseId),
             updateFrequency: CoreSite.FREQUENCY_RARELY,
-            component: AddonModChoiceProvider.COMPONENT,
+            component: ADDON_MOD_CHOICE_COMPONENT,
             ...CoreSites.getReadingStrategyPreSets(options.readingStrategy), // Include reading strategy preSets.
         };
 
@@ -259,7 +277,7 @@ export class AddonModChoiceProvider {
         const preSets: CoreSiteWSPreSets = {
             cacheKey: this.getChoiceOptionsCacheKey(choiceId),
             updateFrequency: CoreSite.FREQUENCY_RARELY,
-            component: AddonModChoiceProvider.COMPONENT,
+            component: ADDON_MOD_CHOICE_COMPONENT,
             componentId: options.cmId,
             ...CoreSites.getReadingStrategyPreSets(options.readingStrategy), // Include reading strategy preSets.
         };
@@ -288,7 +306,7 @@ export class AddonModChoiceProvider {
         };
         const preSets: CoreSiteWSPreSets = {
             cacheKey: this.getChoiceOptionsCacheKey(choiceId),
-            component: AddonModChoiceProvider.COMPONENT,
+            component: ADDON_MOD_CHOICE_COMPONENT,
             componentId: options.cmId,
             ...CoreSites.getReadingStrategyPreSets(options.readingStrategy), // Include reading strategy preSets.
         };
@@ -332,7 +350,7 @@ export class AddonModChoiceProvider {
             this.invalidateChoiceData(courseId),
             this.invalidateOptions(choice.id),
             this.invalidateResults(choice.id),
-            CoreFilepool.invalidateFilesByComponent(siteId, AddonModChoiceProvider.COMPONENT, moduleId),
+            CoreFilepool.invalidateFilesByComponent(siteId, ADDON_MOD_CHOICE_COMPONENT, moduleId),
         ]);
     }
 
@@ -377,7 +395,7 @@ export class AddonModChoiceProvider {
         return CoreCourseLogHelper.log(
             'mod_choice_view_choice',
             params,
-            AddonModChoiceProvider.COMPONENT,
+            ADDON_MOD_CHOICE_COMPONENT,
             id,
             siteId,
         );
@@ -482,7 +500,7 @@ export type AddonModChoiceChoice = {
     introformat: number; // Intro format (1 = HTML, 0 = MOODLE, 2 = PLAIN or 4 = MARKDOWN).
     introfiles?: CoreWSExternalFile[];
     publish?: boolean; // If choice is published.
-    showresults?: number; // 0 never, 1 after answer, 2 after close, 3 always.
+    showresults?: AddonModChoiceShowResults; // 0 never, 1 after answer, 2 after close, 3 always.
     display?: number; // Display mode (vertical, horizontal).
     allowupdate?: boolean; // Allow update.
     allowmultiple?: boolean; // Allow multiple choices.
@@ -531,7 +549,7 @@ export type AddonModChoiceOption = {
     id: number; // Option id.
     text: string; // Text of the choice.
     maxanswers: number; // Maximum number of answers.
-    displaylayout: boolean; // True for orizontal, otherwise vertical.
+    displaylayout: boolean; // True for horizontal, otherwise vertical.
     countanswers: number; // Number of answers.
     checked: boolean; // We already answered.
     disabled: boolean; // Option disabled.
diff --git a/src/addons/mod/choice/services/handlers/prefetch.ts b/src/addons/mod/choice/services/handlers/prefetch.ts
index b406d1ab5..2bb83c85b 100644
--- a/src/addons/mod/choice/services/handlers/prefetch.ts
+++ b/src/addons/mod/choice/services/handlers/prefetch.ts
@@ -21,8 +21,9 @@ import { CoreSitesReadingStrategy } from '@services/sites';
 import { CoreUtils } from '@services/utils/utils';
 import { CoreWSFile } from '@services/ws';
 import { makeSingleton } from '@singletons';
-import { AddonModChoice, AddonModChoiceProvider } from '../choice';
+import { AddonModChoice } from '../choice';
 import { AddonModChoiceSync, AddonModChoiceSyncResult } from '../choice-sync';
+import { ADDON_MOD_CHOICE_COMPONENT } from '../../constants';
 
 /**
  * Handler to prefetch choices.
@@ -32,7 +33,7 @@ export class AddonModChoicePrefetchHandlerService extends CoreCourseActivityPref
 
     name = 'AddonModChoice';
     modName = 'choice';
-    component = AddonModChoiceProvider.COMPONENT;
+    component = ADDON_MOD_CHOICE_COMPONENT;
     updatesNames = /^configuration$|^.*files$|^answers$/;
 
     /**
@@ -74,7 +75,7 @@ export class AddonModChoicePrefetchHandlerService extends CoreCourseActivityPref
         await Promise.all([
             AddonModChoice.getOptions(choice.id, modOptions),
             this.prefetchResults(choice.id, courseId, modOptions),
-            CoreFilepool.addFilesToQueue(siteId, introFiles, AddonModChoiceProvider.COMPONENT, module.id),
+            CoreFilepool.addFilesToQueue(siteId, introFiles, ADDON_MOD_CHOICE_COMPONENT, module.id),
         ]);
     }
 
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/mod-icon/mod-icon.ts b/src/core/components/mod-icon/mod-icon.ts
index 113cb6d54..e8a09cdd0 100644
--- a/src/core/components/mod-icon/mod-icon.ts
+++ b/src/core/components/mod-icon/mod-icon.ts
@@ -51,7 +51,9 @@ export class CoreModIconComponent implements OnInit, OnChanges {
     @Input() showAlt = true; // Show alt otherwise it's only presentation icon.
     @Input() purpose: ModPurpose = ModPurpose.MOD_PURPOSE_OTHER; // Purpose of the module.
     @Input() @HostBinding('class.colorize') colorize = true; // Colorize the icon. Only applies on 4.0 onwards.
-    @Input() @HostBinding('class.branded') isBranded?: boolean; // If icon is branded and no colorize will be applied.
+    @Input() isBranded?: boolean; // If icon is branded and no colorize will be applied.
+
+    @HostBinding('class.branded') brandedClass?: boolean;
 
     @HostBinding('attr.role')
     get getRole(): string | null {
@@ -112,9 +114,9 @@ export class CoreModIconComponent implements OnInit, OnChanges {
     /**
      * Sets the isBranded property when undefined.
      */
-    protected async setIsBranded(): Promise<void> {
+    protected async setBrandedClass(): Promise<void> {
         if (!this.colorize) {
-            this.isBranded = false;
+            this.brandedClass = false;
 
             // It doesn't matter.
             return;
@@ -122,37 +124,36 @@ export class CoreModIconComponent implements OnInit, OnChanges {
 
         // Earlier 4.0, icons were never colorized.
         if (this.iconVersion === IconVersion.LEGACY_VERSION) {
-            this.isBranded = false;
+            this.brandedClass = false;
             this.colorize = false;
 
             return;
         }
 
+        // Reset the branded class to the original value.
+        this.brandedClass = this.isBranded;
+
         // No icon or local icon (not legacy), colorize it.
         if (!this.iconUrl || this.isLocalUrl) {
             // Exception for bigbluebuttonbn, it's the only one that has a branded icon.
             if (this.iconVersion === IconVersion.VERSION_4_0 && this.modname === 'bigbluebuttonbn') {
-                this.isBranded = true;
+                this.brandedClass = true;
 
                 return;
             }
 
-            this.isBranded ??= false;
+            this.brandedClass ??= false;
 
             return;
         }
 
         this.iconUrl = CoreTextUtils.decodeHTMLEntities(this.iconUrl);
 
-        if (this.isBranded !== undefined) {
-            return;
-        }
-
         // If it's an Moodle Theme icon, check if filtericon is set and use it.
         if (this.iconUrl && CoreUrlUtils.isThemeImageUrl(this.iconUrl)) {
             const filter = CoreUrlUtils.getThemeImageUrlParam(this.iconUrl, 'filtericon');
             if (filter === '1') {
-                this.isBranded =  false;
+                this.brandedClass =  false;
 
                 return;
             }
@@ -161,7 +162,7 @@ export class CoreModIconComponent implements OnInit, OnChanges {
             if (this.modname && !CoreSites.getCurrentSite()?.isVersionGreaterEqualThan(['4.0.8', '4.1.3', '4.2'])) {
                 // If version is prior to that, check if the url is a module icon and filter it.
                 if (this.getComponentNameFromIconUrl(this.iconUrl) === this.modname) {
-                    this.isBranded =  false;
+                    this.brandedClass =  false;
 
                     return;
                 }
@@ -169,7 +170,7 @@ export class CoreModIconComponent implements OnInit, OnChanges {
         }
 
         // External icons, or non monologo, do not filter.
-        this.isBranded =  true;
+        this.brandedClass =  true;
     }
 
     /**
@@ -180,7 +181,7 @@ export class CoreModIconComponent implements OnInit, OnChanges {
 
         if (!this.iconUrl) {
             this.loadFallbackIcon();
-            this.setIsBranded();
+            this.setBrandedClass();
 
             return;
         }
@@ -196,7 +197,7 @@ export class CoreModIconComponent implements OnInit, OnChanges {
             !this.isLocalUrl &&
             this.getComponentNameFromIconUrl(this.iconUrl) != this.modname;
 
-        this.setIsBranded();
+        this.setBrandedClass();
 
         await this.setSVGIcon();
     }
@@ -212,7 +213,7 @@ export class CoreModIconComponent implements OnInit, OnChanges {
         this.isLocalUrl = true;
         this.linkIconWithComponent = false;
 
-        const moduleName = !this.modname || CoreCourse.CORE_MODULES.indexOf(this.modname) < 0
+        const moduleName = !this.modname || !CoreCourse.isCoreModule(this.modname)
             ? fallbackModName
             : this.modname;
 
@@ -370,7 +371,7 @@ export class CoreModIconComponent implements OnInit, OnChanges {
 
             // Has own styles, do not apply colors.
             if (doc.documentElement.getElementsByTagName('style').length > 0) {
-                this.isBranded = true;
+                this.brandedClass = true;
             }
 
             // Recursively remove attributes starting with on.
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/course/services/course.ts b/src/core/features/course/services/course.ts
index 4f8e01138..dfb5e833e 100644
--- a/src/core/features/course/services/course.ts
+++ b/src/core/features/course/services/course.ts
@@ -137,7 +137,7 @@ export class CoreCourseProvider {
 
     static readonly COMPONENT = 'CoreCourse';
 
-    readonly CORE_MODULES = [
+    static readonly CORE_MODULES = [
         'assign', 'bigbluebuttonbn', 'book', 'chat', 'choice', 'data', 'feedback', 'folder', 'forum', 'glossary', 'h5pactivity',
         'imscp', 'label', 'lesson', 'lti', 'page', 'quiz', 'resource', 'scorm', 'survey', 'url', 'wiki', 'workshop',
     ];
@@ -848,7 +848,7 @@ export class CoreCourseProvider {
             return mimetypeIcon;
         }
 
-        if (this.CORE_MODULES.indexOf(moduleName) < 0) {
+        if (!CoreCourse.isCoreModule(moduleName)) {
             if (modicon) {
                 return modicon;
             }
@@ -1324,6 +1324,17 @@ export class CoreCourseProvider {
         return !!module.url;
     }
 
+    /**
+     * Check if the module is a core module.
+     *
+     * @param moduleName The module name.
+     * @returns Whether it's a core module.
+     */
+    isCoreModule(moduleName: string): boolean {
+        // If core modules are removed for a certain version we should check the version of the site.
+        return CoreCourseProvider.CORE_MODULES.includes(moduleName);
+    }
+
     /**
      * Wait for any course format plugin to load, and open the course page.
      *
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
  */