Add line-clamp mixin and text truncation helper classes

Author: kylegordy

assets/_sass/base/_helpers.scss

@@ -87,6 +87,24 @@
     margin: 0 !important;
 }
 
+////////////////////
+// Truncation
+////////////////////
+
+.text-truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.clamp-2 {
+    @include line-clamp(2);
+}
+
+.clamp-3 {
+    @include line-clamp(3);
+}
+
 ////////////////////
 // Logo
 ////////////////////

assets/_sass/mixins/_line-clamp.scss

@@ -0,0 +1,12 @@
+// Limits a block of text to a certain number of lines
+// @include line-clamp(max-lines);
+
+@mixin line-clamp($lines: 2) {
+    // Use line-clamp if supported (will have a trailing ellipsis)
+    @supports (-webkit-line-clamp: 1) {
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: $lines;
+    }
+}

assets/css/main.scss

@@ -6,6 +6,8 @@
 // Imports
 ////////////////////
 
+@import "mixins/line-clamp";
+
 @import "base/units";
 @import "base/colors";
 @import "base/normalize";