add global class ellipsis-left for strings where the end is more relevant to view than the beginning (#52)

CHANGELOG.md

@@ -1,5 +1,10 @@
 # CHANGELOG
 
+## v8.1.11
+### Changed
+- Added global class ellipsis-left to display tree structure-type items where the
+text at the end of the string is more relevant than the text at the beginning
+
 ## v8.1.10
 ### Changed
 - Added $size-75 sizing constant (6rem)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@microsoft/azure-iot-ux-fluent-css",
   "description": "Azure IoT common styles library for CSS, Colors and Themes",
-  "version": "8.1.10",
+  "version": "8.1.11",
   "license": "MIT",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

src/_normalize.scss

@@ -217,6 +217,19 @@
     white-space: nowrap;
   }
 
+  .ellipsis-left {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    direction: rtl;
+    text-align: left;
+  
+    @include rtl {
+        direction: ltr;
+        text-align: right;
+    }
+  }
+
   .hidden {
     display: none !important;
   }