From 3ae9cffba8a33da016991e988182376f94fd1624 Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Sat, 14 Sep 2024 15:08:17 +0800
Subject: [PATCH] TootPreviewCard: limit text lines (#9)

A problem in this impl is that the ellipsis does
not show.
---
 src/material/theme.css             | 5 +++++
 src/material/typography.module.css | 1 +
 src/timelines/toot.module.css      | 7 +++++++
 3 files changed, 13 insertions(+)

diff --git a/src/material/theme.css b/src/material/theme.css
index deacbe7..1228ffd 100644
--- a/src/material/theme.css
+++ b/src/material/theme.css
@@ -11,6 +11,8 @@
   --button-size: 1rem;
   --button-weight: 500;
   --button-text-transform: uppercase;
+  --body-line-height: 1.375;
+  --title-line-height: 1.25;
 
   @media (min-width: 1024px) {
     & {
@@ -39,6 +41,8 @@
   --caption-size: 0.9375rem;
   --button-size: 1.0625rem;
   --button-text-transform: none;
+  --body-line-height: 1.425;
+  --title-line-height: 1.3;
 
   @media (min-width: 1024px) {
     & {
@@ -148,4 +152,5 @@
 
 body {
   font-size: var(--body-size, 1rem);
+  line-height: var(--body-line-height);
 }
\ No newline at end of file
diff --git a/src/material/typography.module.css b/src/material/typography.module.css
index 2c079da..4606687 100644
--- a/src/material/typography.module.css
+++ b/src/material/typography.module.css
@@ -22,6 +22,7 @@
 .title {
   font-size: var(--title-size);
   font-weight: var(--title-weight);
+  line-height: var(--title-line-height);
 }
 
 .subheading {
diff --git a/src/timelines/toot.module.css b/src/timelines/toot.module.css
index 89b4609..3a65937 100644
--- a/src/timelines/toot.module.css
+++ b/src/timelines/toot.module.css
@@ -137,12 +137,19 @@
 
   >h1 {
     color: var(--tutu-color-on-surface);
+    max-height: calc(4 * var(--title-line-height) * var(--title-size));
+  }
+
+  > p {
+    max-height: calc(8 * var(--body-line-height) * var(--body-size));
   }
 
   >h1,
   >p {
     margin-left: 16px;
     margin-right: 16px;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   &.compact {