MiddleEllipsis

Foundation

텍스트가 넘칠 때 가운데를 줄여 앞뒤를 남기는 컴포넌트.

Usage

파일명이나 식별자처럼 앞뒤가 모두 중요하고 가운데만 줄여야 할 때 사용한다.

import

import { MiddleEllipsis } from '@mildang/design-system/Text';

API Reference

MiddleEllipsis Props

Prop

Type

Default

text

필수

string

지정 안 함

onTruncatedChange

(isTruncated: boolean) => void

지정 안 함

SystemStyleObject

지정 안 함

같은 패밀리

@mildang/design-system/Text 에서 같이 내보내는 컴포넌트다.

Text

일관된 타이포그래피 계층과 리듬을 적용하는 텍스트 컴포넌트.

예제

기본 사용

코드

Open in Playground

import { MiddleEllipsis } from '@mildang/design-system/Text';
import { HStack } from '@mildang/styled-system/jsx';

export default function Example() {
  return (
    <HStack flexWrap="wrap" justifyContent="center" gap="8">
      <MiddleEllipsis text="2026-2학기/수학/중간고사/문항분석-최종본-v3.xlsx" />
    </HStack>
  );
}