#44 Text in place teaser is cut of

components/02_Molecules/placeTeaser/_placeTeaser.scss

@@ -49,6 +49,7 @@
         color: $-grey;
         order: 3;
         flex-basis: 100%;
+
         .LP-Paragraph {
             font-size: 22px;
         }
@@ -64,6 +65,7 @@
             height: 165px;
         }
     }
+
     .LP-PlaceTeaser--extended {
         display: flex;
         flex-direction: row;
@@ -81,7 +83,8 @@
             align-items: flex-start;
             gap: unset;
 
-            .LP-Headline, .LP-Paragraph {
+            .LP-Headline,
+            .LP-Paragraph {
                 font-size: unset;
             }
 
@@ -114,6 +117,11 @@
 
             .LP-Paragraph {
                 font-size: unset;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
+                overflow: hidden;
+                text-overflow: ellipsis;
             }
         }
 

package.json

@@ -2,11 +2,12 @@
     "name": "Lostplaces",
     "version": "0.1.0",
     "dependencies": {
-        "@frctl/fractal": "^1.3.0",
+        "@frctl/fractal": "^1.5.2",
         "fractal": "0.0.3",
         "lodash": "^4.17.20",
         "node-sass": "^4.14.1",
-        "sass": "^1.26.11"
+        "sass": "^1.30.0",
+        "sass-loader": "^10.0.5"
     },
     "scripts": {
         "sass": "node-sass -w components/main.scss -o public/ --recursive",

public/main.css

@@ -923,7 +923,8 @@ body {
       justify-content: space-between;
       align-items: flex-start;
       gap: unset; }
-      .LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta .LP-Headline, .LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta .LP-Paragraph {
+      .LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta .LP-Headline,
+      .LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta .LP-Paragraph {
         font-size: unset; }
       .LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta .LP-PlaceTeaser__Info .LP-Headline {
         font-size: 28px; }
@@ -941,7 +942,12 @@ body {
       overflow: hidden;
       order: unset; }
       .LP-PlaceTeaser--extended .LP-PlaceTeaser__Description .LP-Paragraph {
-        font-size: unset; }
+        font-size: unset;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+        text-overflow: ellipsis; }
     .LP-PlaceTeaser--extended .LP-PlaceTeaser__Image {
       height: 165px;
       width: 280px;