Add TruncatedText component (#932)

ui/v2.5/src/components/Scenes/SceneCard.tsx

@@ -4,7 +4,13 @@ import { Link } from "react-router-dom";
 import cx from "classnames";
 import * as GQL from "src/core/generated-graphql";
 import { useConfiguration } from "src/core/StashService";
-import { Icon, TagLink, HoverPopover, SweatDrops } from "src/components/Shared";
+import {
+  Icon,
+  TagLink,
+  HoverPopover,
+  SweatDrops,
+  TruncatedText,
+} from "src/components/Shared";
 import { TextUtils } from "src/utils";
 
 interface IScenePreviewProps {
@@ -363,14 +369,18 @@ export const SceneCard: React.FC<ISceneCardProps> = (
       </div>
       <div className="card-section">
         <h5 className="card-section-title">
-          {props.scene.title
-            ? props.scene.title
-            : TextUtils.fileNameFromPath(props.scene.path)}
+          <TruncatedText
+            text={
+              props.scene.title
+                ? props.scene.title
+                : TextUtils.fileNameFromPath(props.scene.path)
+            }
+            lineCount={2}
+          />
         </h5>
         <span>{props.scene.date}</span>
         <p>
-          {props.scene.details &&
-            TextUtils.truncate(props.scene.details, 100, "... (continued)")}
+          <TruncatedText text={props.scene.details} lineCount={3} />
         </p>
       </div>