Middle Truncation
텍스트의 처음과 끝을 남기고 가운데를 줄임표로 처리해요.
특징
- 세 가지 잘라내기 전략을 지원해요: 끝 글자 수 고정, 최소 글자 수 보장, 균등 분할.
- 실제로 렌더링된 텍스트 너비를 기준으로 픽셀 단위까지 정확하게 계산해요.
- 컨테이너 크기가 바뀌면 자동으로 다시 계산해요.
설치
처음이라면 components.json에 @smlee 레지스트리를 한 번만 등록하세요.
{
"registries": {
"@smlee": "https://smlee.info/r/{name}.json"
}
}그다음 컴포넌트를 추가해요.
pnpm dlx shadcn@latest add @smlee/middle-truncation
사용법
import { MiddleTruncation } from "@/components/middle-truncation"<MiddleTruncation>
/Users/smlee/Code/smlee.info/src/components/ui/button.tsx
</MiddleTruncation>API 레퍼런스
MiddleTruncation
속성
타입
예시
끝 글자 수 고정
끝에서 지정한 글자 수를 항상 그대로 남겨요.
<MiddleTruncation end={4}>
FY26_Q1_Consolidated_Financial_Statements.pdf
</MiddleTruncation>최소 글자 수 보장
텍스트를 균등하게 나누되, 끝에 최소한의 글자 수는 보장해요.
<MiddleTruncation minEnd={12}>
/Users/smlee/Code/smlee.info/node_modules/shadcn/package.json
</MiddleTruncation>균등 분할
아무 조건도 주지 않으면 가운데를 기준으로 균등하게 나눠요.
<MiddleTruncation>
/Users/smlee/Code/smlee.info/src/components/ui/button.tsx
</MiddleTruncation>