diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index 9b72049a891..a45e49ac604 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -313,9 +313,7 @@ $mobile-breakpoint: 700px;
       }
       td.x-value {
         max-width: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+        @include ellipsis;
       }
     }
     .bar-container {
@@ -861,9 +859,7 @@ table#user-badges {
 .value-list {
   .value {
     padding: 0.125em 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    @include ellipsis;
     display: flex;
 
     &:last-child {
diff --git a/app/assets/stylesheets/common/admin/admin_report_counters.scss b/app/assets/stylesheets/common/admin/admin_report_counters.scss
index 0496e7dd3b7..1731ef65cba 100644
--- a/app/assets/stylesheets/common/admin/admin_report_counters.scss
+++ b/app/assets/stylesheets/common/admin/admin_report_counters.scss
@@ -37,9 +37,7 @@
 
       &.title {
         text-align: left;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
+        @include ellipsis;
 
         .d-icon {
           color: $primary-low-mid;
diff --git a/app/assets/stylesheets/common/admin/admin_report_table.scss b/app/assets/stylesheets/common/admin/admin_report_table.scss
index e63330355a3..2de64f73263 100644
--- a/app/assets/stylesheets/common/admin/admin_report_table.scss
+++ b/app/assets/stylesheets/common/admin/admin_report_table.scss
@@ -2,9 +2,7 @@
   &.two-columns {
     .table .admin-report-table-cell:first-child,
     .table .admin-report-table-header:first-child {
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
+      @include ellipsis;
       text-align: left;
       width: 80%;
     }
@@ -32,8 +30,7 @@
       outline: none;
       background: none;
       padding: 3px 8px;
-      overflow: hidden;
-      text-overflow: ellipsis;
+      @include ellipsis;
     }
 
     &.is-current-sort {
@@ -106,9 +103,7 @@
   }
 
   .admin-report-table-cell.term {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
+    @include ellipsis;
   }
 }
 
@@ -132,9 +127,7 @@
 
   .admin-report-table-cell.post,
   .admin-report-table-cell.edit_reason {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
+    @include ellipsis;
   }
 }
 
diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss
index 7bc0de21ac1..4495cf2dede 100644
--- a/app/assets/stylesheets/common/admin/customize.scss
+++ b/app/assets/stylesheets/common/admin/customize.scss
@@ -589,7 +589,11 @@
   .category,
   .external_url,
   .post {
-    text-overflow: ellipsis;
+    @include ellipsis;
+    max-width: 100px;
+    @include breakpoint(tablet) {
+      max-width: 100%;
+    }
   }
 
   &.grid tr.admin-list-item {
diff --git a/app/assets/stylesheets/common/admin/emails.scss b/app/assets/stylesheets/common/admin/emails.scss
index cb71da61aa1..4684d985005 100644
--- a/app/assets/stylesheets/common/admin/emails.scss
+++ b/app/assets/stylesheets/common/admin/emails.scss
@@ -15,16 +15,12 @@
   }
   .username div {
     max-width: 180px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    @include ellipsis;
   }
   .addresses p {
     margin: 2px 0;
     max-width: 200px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    @include ellipsis;
   }
 }
 
diff --git a/app/assets/stylesheets/common/admin/users.scss b/app/assets/stylesheets/common/admin/users.scss
index 87bf9bffa97..29f430a5dec 100644
--- a/app/assets/stylesheets/common/admin/users.scss
+++ b/app/assets/stylesheets/common/admin/users.scss
@@ -102,10 +102,8 @@
 
 .admin-users-list {
   td.username {
-    white-space: nowrap;
+    @include ellipsis;
     overflow-wrap: break-word;
-    overflow: hidden;
-    text-overflow: ellipsis;
   }
   @media screen and (max-width: 970px) and (min-width: 768px) {
     td.username {
diff --git a/app/assets/stylesheets/common/base/category-list.scss b/app/assets/stylesheets/common/base/category-list.scss
index ba256cc0865..7ad6f5044ba 100644
--- a/app/assets/stylesheets/common/base/category-list.scss
+++ b/app/assets/stylesheets/common/base/category-list.scss
@@ -7,8 +7,7 @@
   .category-name {
     display: inline-block;
     max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    @include ellipsis;
     vertical-align: text-top;
     line-height: $line-height-medium;
   }
@@ -109,8 +108,6 @@
     color: dark-light-choose($primary-medium, $secondary-high);
     .overflow {
       max-height: 6em;
-      overflow: hidden;
-      text-overflow: ellipsis;
     }
   }
 
@@ -122,7 +119,6 @@
     text-align: center;
     color: $primary;
     overflow: hidden;
-    text-overflow: ellipsis;
   }
 
   .subcategories {
@@ -131,9 +127,7 @@
     .subcategory {
       display: flex;
       align-items: center;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
+      @include ellipsis;
       margin-right: 1em;
       margin-bottom: 0.6em;
       .subcategory-image-placeholder {
@@ -142,8 +136,7 @@
       }
       .subcategory-link {
         min-width: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
+        @include ellipsis;
       }
       .logo img {
         display: inline-block;
@@ -166,7 +159,6 @@
     font-size: $font-up-2;
     text-align: center;
     overflow: hidden;
-    text-overflow: ellipsis;
   }
 
   .category-box-heading {
@@ -192,7 +184,6 @@
       .overflow {
         max-height: 3em;
         overflow: hidden;
-        text-overflow: ellipsis;
       }
       .d-icon {
         margin-right: 0.15em;
diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss
index ff516a3c3a3..f6505c1b4dd 100644
--- a/app/assets/stylesheets/common/base/compose.scss
+++ b/app/assets/stylesheets/common/base/compose.scss
@@ -122,9 +122,7 @@
       }
 
       .action-title {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+        @include ellipsis;
       }
 
       .topic-link,
@@ -136,9 +134,7 @@
       .username {
         margin-right: 5px;
         max-width: 100px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+        @include ellipsis;
         @media screen and (max-width: 500px) {
           display: none;
         }
@@ -358,9 +354,7 @@
       a {
         padding: 5px;
         display: block;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+        @include ellipsis;
 
         span.username {
           color: $primary;
diff --git a/app/assets/stylesheets/common/base/emoji.scss b/app/assets/stylesheets/common/base/emoji.scss
index cf3869e3dfa..0c59b17842d 100644
--- a/app/assets/stylesheets/common/base/emoji.scss
+++ b/app/assets/stylesheets/common/base/emoji.scss
@@ -106,10 +106,8 @@ sup img.emoji {
 }
 
 .emoji-picker .info {
-  text-overflow: ellipsis;
+  @include ellipsis;
   padding-left: 8px;
-  white-space: nowrap;
-  overflow: hidden;
   font-weight: 700;
   max-width: 125px;
 }
diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index 603585af548..f95b8ded1ec 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -245,9 +245,7 @@
   .topic-link {
     color: $header_primary;
     display: block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    @include ellipsis;
   }
   .topic-statuses {
     .d-icon {
@@ -275,9 +273,7 @@
     flex: 0 1 auto;
     min-width: 1px;
     .badge-wrapper {
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
+      @include ellipsis;
     }
   }
   .badge-wrapper {
@@ -305,9 +301,7 @@
     flex: 1 0 0%; // unit on flex-basis is required for IE11
     .discourse-tags {
       color: $header_primary-high;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
+      @include ellipsis;
       .discourse-tag {
         display: inline; // tags need to stay inline in order for them to truncate
       }
@@ -357,9 +351,7 @@ $mobile-avatar-height: 1.532em;
     padding: 0 5px;
     border: 1px solid $primary-low;
     border-radius: 0.25em;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    @include ellipsis;
 
     .icon {
       display: flex;
@@ -376,9 +368,7 @@ $mobile-avatar-height: 1.532em;
     }
 
     span {
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
+      @include ellipsis;
     }
   }
 
diff --git a/app/assets/stylesheets/common/base/lightbox.scss b/app/assets/stylesheets/common/base/lightbox.scss
index 20ed8ebea62..dc75b54a071 100644
--- a/app/assets/stylesheets/common/base/lightbox.scss
+++ b/app/assets/stylesheets/common/base/lightbox.scss
@@ -47,9 +47,7 @@ $meta-element-margin: 6px;
 
   .filename {
     margin: $meta-element-margin;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    @include ellipsis;
   }
 
   .d-icon {
diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
index a02fccf8b89..d03cb2cb993 100644
--- a/app/assets/stylesheets/common/base/menu-panel.scss
+++ b/app/assets/stylesheets/common/base/menu-panel.scss
@@ -115,8 +115,6 @@
       line-height: $line-height-large;
     }
     .badge-wrapper {
-      overflow: hidden;
-      text-overflow: ellipsis;
       &.bar,
       &.bullet {
         color: $primary;
@@ -143,8 +141,6 @@
 
   span.badge-category {
     max-width: 100px;
-    overflow: hidden;
-    text-overflow: ellipsis;
   }
 
   div.discourse-tags {
@@ -341,9 +337,7 @@ div.menu-links-header {
     span.d-label {
       display: block;
       max-width: 130px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+      @include ellipsis;
     }
 
     @include breakpoint(mobile-medium) {
diff --git a/app/assets/stylesheets/common/base/onebox.scss b/app/assets/stylesheets/common/base/onebox.scss
index e44e7d2d7fc..c09bfb54b65 100644
--- a/app/assets/stylesheets/common/base/onebox.scss
+++ b/app/assets/stylesheets/common/base/onebox.scss
@@ -562,21 +562,18 @@ aside.onebox.twitterstatus .onebox-body {
   .outer-box {
     position: absolute;
     z-index: z("base");
-    overflow: hidden;
     font-size: $font-down-1;
     color: #fff;
     background-color: rgba(0, 0, 0, 0.6);
-    text-overflow: ellipsis;
-    max-width: 100%;
+    @include ellipsis;
+    max-width: 690px;
     padding: 5px 0;
 
     .inner-box {
       padding-left: 10px;
       padding-right: 10px;
       overflow: hidden;
-      text-overflow: ellipsis;
-      word-wrap: normal;
-      white-space: nowrap;
+      @include ellipsis;
 
       .album-title {
         width: 100%;
diff --git a/app/assets/stylesheets/common/base/reviewables.scss b/app/assets/stylesheets/common/base/reviewables.scss
index e47cb5287f4..6adae41eda5 100644
--- a/app/assets/stylesheets/common/base/reviewables.scss
+++ b/app/assets/stylesheets/common/base/reviewables.scss
@@ -284,7 +284,6 @@
   .reviewed-by {
     display: flex;
     align-items: center;
-    white-space: nowrap;
   }
 
   .user-flag-percentage {
@@ -309,8 +308,7 @@
       &.user a,
       &.reviewed-by a {
         max-width: 150px;
-        overflow: hidden;
-        text-overflow: ellipsis;
+        @include ellipsis;
       }
     }
 
@@ -327,8 +325,7 @@
         padding: 0.5em 1em 0.5em 0;
       }
       @include breakpoint("mobile-large") {
-        overflow: hidden;
-        text-overflow: ellipsis;
+        @include ellipsis;
         padding-right: 0.5em;
       }
     }
diff --git a/app/assets/stylesheets/common/base/search-menu.scss b/app/assets/stylesheets/common/base/search-menu.scss
index 0ba64993ba9..04d47144632 100644
--- a/app/assets/stylesheets/common/base/search-menu.scss
+++ b/app/assets/stylesheets/common/base/search-menu.scss
@@ -153,9 +153,7 @@
 
             .name,
             .slug {
-              white-space: nowrap;
-              overflow: hidden;
-              text-overflow: ellipsis;
+              @include ellipsis;
             }
 
             .name {
@@ -207,9 +205,7 @@
 
             .username,
             .name {
-              white-space: nowrap;
-              overflow: hidden;
-              text-overflow: ellipsis;
+              @include ellipsis;
             }
 
             .username {
diff --git a/app/assets/stylesheets/common/base/tagging.scss b/app/assets/stylesheets/common/base/tagging.scss
index 0802a3a8f5a..0502b687170 100644
--- a/app/assets/stylesheets/common/base/tagging.scss
+++ b/app/assets/stylesheets/common/base/tagging.scss
@@ -71,9 +71,7 @@ $tag-color: $primary-medium;
 .discourse-tag {
   max-width: 14em;
   display: inline-block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  @include ellipsis;
   vertical-align: middle;
 }
 
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index 03c00c58ed5..b2fd2b5db14 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -53,9 +53,7 @@
     font-size: $font-0;
     margin-right: 8px;
     display: inline-block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    @include ellipsis;
     vertical-align: middle;
     a {
       color: dark-light-choose($primary-high, $secondary-low);
diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss
index 88c3c8e1ddd..a4f1bdc34b4 100644
--- a/app/assets/stylesheets/common/base/topic.scss
+++ b/app/assets/stylesheets/common/base/topic.scss
@@ -220,9 +220,7 @@ a.badge-category {
     display: flex;
     align-items: center;
     span:not(.badge) {
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
+      @include ellipsis;
     }
   }
   ul {
diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss
index 872661991ce..8fdafe020f9 100644
--- a/app/assets/stylesheets/common/base/user.scss
+++ b/app/assets/stylesheets/common/base/user.scss
@@ -143,8 +143,6 @@
       dd {
         padding: 0;
         margin: 0 15px 0 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
         color: $primary;
 
         &.groups {
@@ -182,9 +180,7 @@
       h2 {
         font-weight: normal;
         max-width: 100%;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+        @include ellipsis;
       }
 
       h3 {
diff --git a/app/assets/stylesheets/common/components/user-card.scss b/app/assets/stylesheets/common/components/user-card.scss
index c1132c06e54..21e15ec0b74 100644
--- a/app/assets/stylesheets/common/components/user-card.scss
+++ b/app/assets/stylesheets/common/components/user-card.scss
@@ -119,9 +119,7 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
   h2,
   h3 {
     margin: 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    @include ellipsis;
   }
   h1,
   h2 {
@@ -201,9 +199,7 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
       }
       .website-name a,
       .location span {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+        @include ellipsis;
         color: $primary;
       }
       .location {
@@ -226,17 +222,11 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
       display: flex;
       align-items: flex-start;
       .user-badge {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+        @include ellipsis;
         background: $primary-very-low;
         border: 1px solid $primary-low;
         color: $primary;
       }
-      .badge-display-name {
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
       .more-user-badges {
         a {
           @extend .user-badge;
diff --git a/app/assets/stylesheets/common/components/user-info.scss b/app/assets/stylesheets/common/components/user-info.scss
index fee047c4886..b92b4528822 100644
--- a/app/assets/stylesheets/common/components/user-info.scss
+++ b/app/assets/stylesheets/common/components/user-info.scss
@@ -24,9 +24,7 @@
     }
 
     .name-line {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+      @include ellipsis;
     }
 
     .username a {
diff --git a/app/assets/stylesheets/common/components/user-stream-item.scss b/app/assets/stylesheets/common/components/user-stream-item.scss
index 817225165f5..284d0ba4795 100644
--- a/app/assets/stylesheets/common/components/user-stream-item.scss
+++ b/app/assets/stylesheets/common/components/user-stream-item.scss
@@ -66,18 +66,14 @@
   }
 
   .title {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    @include ellipsis;
     display: block;
   }
 
   .name {
     font-size: $font-0;
     max-width: 400px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    @include ellipsis;
   }
 
   .edit-reason {
diff --git a/app/assets/stylesheets/common/foundation/mixins.scss b/app/assets/stylesheets/common/foundation/mixins.scss
index 99f76345478..b2ce6a55f7f 100644
--- a/app/assets/stylesheets/common/foundation/mixins.scss
+++ b/app/assets/stylesheets/common/foundation/mixins.scss
@@ -57,6 +57,12 @@ $breakpoints: (
   }
 }
 
+@mixin ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 //
 // --------------------------------------------------
 
diff --git a/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss b/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
index d257494c442..d1ef732cfd4 100644
--- a/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
+++ b/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
@@ -78,9 +78,7 @@
           font-size: $font-0;
           color: $primary;
           padding: 0;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
+          @include ellipsis;
           max-width: 100%;
         }
 
diff --git a/app/assets/stylesheets/common/select-kit/select-kit.scss b/app/assets/stylesheets/common/select-kit/select-kit.scss
index c0d86c737b5..8cb552acb17 100644
--- a/app/assets/stylesheets/common/select-kit/select-kit.scss
+++ b/app/assets/stylesheets/common/select-kit/select-kit.scss
@@ -71,9 +71,7 @@
       text-align: left;
       flex: 0 1 auto;
       padding: 1px 0;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
+      @include ellipsis;
       color: inherit;
     }
 
diff --git a/app/assets/stylesheets/desktop/category-list.scss b/app/assets/stylesheets/desktop/category-list.scss
index 2fc738478c2..8e6e8afc9dd 100644
--- a/app/assets/stylesheets/desktop/category-list.scss
+++ b/app/assets/stylesheets/desktop/category-list.scss
@@ -80,9 +80,7 @@
       color: dark-light-choose($primary-medium, $secondary-high);
     }
     .title {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+      @include ellipsis;
       flex: 0 1 auto;
     }
     .topic-statuses {
diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss
index b951457984d..a7c73db6c51 100644
--- a/app/assets/stylesheets/desktop/user.scss
+++ b/app/assets/stylesheets/desktop/user.scss
@@ -124,16 +124,12 @@
           }
           h1 {
             max-width: 100%;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
+            @include ellipsis;
           }
           .location-and-website {
             display: flex;
             max-width: 100%;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
+            @include ellipsis;
             .user-profile-location {
               margin-right: 1em;
             }
diff --git a/app/assets/stylesheets/mobile/components/user-card.scss b/app/assets/stylesheets/mobile/components/user-card.scss
index 5d87399f9d9..0345aaf7433 100644
--- a/app/assets/stylesheets/mobile/components/user-card.scss
+++ b/app/assets/stylesheets/mobile/components/user-card.scss
@@ -28,9 +28,7 @@ $avatar_width: 120px;
           border-left: 0.5em solid transparent;
         }
         button {
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
+          @include ellipsis;
         }
       }
     }
diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss
index 2f25202bbc6..3919886d807 100644
--- a/app/assets/stylesheets/mobile/compose.scss
+++ b/app/assets/stylesheets/mobile/compose.scss
@@ -71,9 +71,7 @@
     }
     .draft-text {
       width: calc(100% - 40px);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+      @include ellipsis;
     }
   }
 
diff --git a/app/assets/stylesheets/mobile/header.scss b/app/assets/stylesheets/mobile/header.scss
index 43e9813f2e6..413d753fc62 100644
--- a/app/assets/stylesheets/mobile/header.scss
+++ b/app/assets/stylesheets/mobile/header.scss
@@ -8,9 +8,7 @@
   // some protection for text-only site titles
   .title {
     max-width: 75%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    @include ellipsis;
     -webkit-animation: fadein 0.5s;
     animation: fadein 0.5s;
     // This acts as a placeholder if for some reason the small logo takes a while
diff --git a/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss b/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss
index c4edbf91a90..66593514d73 100644
--- a/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss
+++ b/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss
@@ -198,9 +198,7 @@
           border: 0;
           outline: none;
           flex: 1;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
+          @include ellipsis;
           width: 100%;
           text-align: left;
         }