diff --git a/src/assets/main.scss b/src/assets/main.scss
index 8de888e..a2474ee 100644
--- a/src/assets/main.scss
+++ b/src/assets/main.scss
@@ -288,6 +288,16 @@ body{
             //   font-weight: 100;
             // }
             padding-bottom: 0.5em;
+            overflow: hidden;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 20;
+            max-height: 20em;
+            transition: -webkit-line-clamp 0.5s ease-in-out, max-height 0.5s ease-in-out;
+            &.ellipsed{
+              max-height: 2em;
+              -webkit-line-clamp: 2;
+            }
           }
           // nav.icons{
           //   ul{
diff --git a/src/components/layout/CartoucheLayout.vue b/src/components/layout/CartoucheLayout.vue
index f2d5fd8..fe4e1b2 100644
--- a/src/components/layout/CartoucheLayout.vue
+++ b/src/components/layout/CartoucheLayout.vue
@@ -54,7 +54,7 @@ export default {
   <header ref="cartouche_header">
     <div class="concernement-cartouche-icons">
       <label :class="{ hidden: mainscrolled }">{{ ct_concernement.title.description }}</label>
-      <h2>{{ concernement.title }}</h2>
+      <h2 :class="{ ellipsed: mainscrolled }">{{ concernement.title }}</h2>
       <!-- <nav class="icons">
         <ul>
           <li v-if="concernement.has_recit" >