Code snippet - limit paragraph lines

📅April 23rd, 2022 - 1 min read

Implementation

Emotion

Implementation in Emotion or any CSS-in-JS like libraries using styled function

ts
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

Stitches

Implementation using radix ui Stitches

ts
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",
})

Usage

Emotion

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

Stitches

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