[DSC-1653] Defined a mixin for vertical ellipsis

Author: alisaismailati

src/styles/_global-styles.scss

@@ -352,3 +352,22 @@ ul.dso-edit-menu-dropdown > li .nav-item.nav-link {
 .text-gray-500 {
   color: var(--bs-gray-500) !important;
 }
+
+/* Define a mixin for vertical ellipsis
+   To be used as a class e.g. ellipsis-y-1,... ellipsis-y-4,... ellipsis-y-10
+ */
+@mixin ellipsis-y($lines) {
+  display: -webkit-box;
+  -webkit-line-clamp: $lines; // number of lines
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+// Generate classes for 1 to 10 lines
+@for $i from 1 through 10 {
+  .ellipsis-y-#{$i} {
+    @include ellipsis-y($i);
+  }
+}
+// ellipsis-y-1, ellipsis-y-2,  ellipsis-y-3,  ellipsis-y-4,  ellipsis-y-5,  ellipsis-y-6,  ellipsis-y-7,  ellipsis-y-8,  ellipsis-y-9,  ellipsis-y-10