fix(ui): gracefully handle lengthy titles & long words in overviews (#1338)

4 years ago · d8bcb99b2f
parent 55b18f0023
commit d8bcb99b2f
1 changed files with 11 additions and 1 deletions
--- a/src/components/TitleCard/index.tsx
+++ b/src/components/TitleCard/index.tsx
@ -221,7 +221,16 @@ const TitleCard: React.FC<TitleCardProps> = ({
                    >
                      {year && <div className="text-sm">{year}</div>}

-                      <h1 className="text-xl leading-tight whitespace-normal">
+                      <h1
+                        className="text-xl leading-tight whitespace-normal"
+                        style={{
+                          WebkitLineClamp: 3,
+                          display: '-webkit-box',
+                          overflow: 'hidden',
+                          WebkitBoxOrient: 'vertical',
+                          wordBreak: 'break-word',
+                        }}
+                      >
                        {title}
                      </h1>
                      <div
@ -236,6 +245,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
                          display: '-webkit-box',
                          overflow: 'hidden',
                          WebkitBoxOrient: 'vertical',
+                          wordBreak: 'break-word',
                        }}
                      >
                        {summary}