:art: instituting hard line-clamp on card excerpts

vue-theme/src/components/card.vue

@@ -15,7 +15,7 @@
                 h1.t-up.t-cntr.t-b {{ content.title }}
             p(v-if="content.end && type == 'event'" class="datetime") {{ dateFrom(content.start, type=='event') }} – {{ dateFrom(content.end, type=='event').split(',')[1] }}
             p(v-else-if="content.end" class="datetime") {{ dateFrom(content.start, type=='event') }} – {{ dateFrom(content.end, type=='event') }}
-            p {{ content.excerpt }}
+            p.excerpt {{ content.excerpt }}
 </template>
 
 <script>
@@ -57,10 +57,16 @@ export default {
     h1
         font-size: $ms-1
         padding: $ms--5 0 $ms--3 0
-    p.datetime
-        font-size: $ms--1
-        margin: 0 0 calc($ms-0/2) 0
-        line-height: calc($ms-0/2)
+    p
+        &.datetime
+            font-size: $ms--1
+            margin: 0 0 calc($ms-0/2) 0
+            line-height: calc($ms-0/2)
+        &.excerpt
+            display: -webkit-box
+            -webkit-line-clamp: 4
+            -webkit-box-orient: vertical
+            overflow: hidden
 
     
 /* for widths larger than 768px */