Code snippet - limit paragraph lines

import styled from "@emotion/styled";

interface TextEllipsedProps {
  maxLine?: string | number;
}

const TextEllipsed = styled("p")<TextEllipsedProps>(
  {
    overflow: "hidden",
    textOverflow: "ellipsis",
    display: "-webkit-box",
    WebkitBoxOrient: "vertical",
  },
  ({ maxLine }) => ({
    lineClamp: typeof maxLine === "number" ? String(maxLine) : maxLine,
    WebkitLineClamp: typeof maxLine === "number" ? String(maxLine) : maxLine,
  })
);

TextEllipsed.defaultProps = {
  maxLine: 1,
};

export default TextEllipsed;

import { createStitches } from "@stitches/react";

const { styled } = createStitches({
  utils: {
    maxLine: (value: string | number) => ({
      lineClamp: typeof value === "number" ? String(value) : value,
      "-webkit-line-clamp": typeof value === "number" ? String(value) : value,
    }),
  },
});

const TextEllipsed = styled("p", {
  overflow: "hidden",
  textOverflow: "ellipsis",
  display: "-webkit-box",
  "-webkit-box-orient": "vertical",
  lineClamp: "1",
  "-webkit-line-clamp": "1",
});

const App = () => {
  return <TextEllipsed maxLine={2}>Paragraph</TextEllipsed>;
};

const App = () => {
  return <TextEllipsed css={{ maxLine: 2 }}>Paragraph</TextEllipsed>;
};