Desk with computer desktop
Generated with AI
🗓️ Apr 23rd, 2022

Code snippet - limit paragraph lines

Implementation

Emotion

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

TextEllipsed.tsx
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

TextEllipsed.tsx
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

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

Stitches

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