Overflow content
Overflow content (오버플로 콘텐츠)
오버플로 콘텐츠는 문단이나 텍스트 문자열처럼 원하는 공간을 초과하는 텍스트예요. 주어진 공간을 넘어서는 일련의 컴포넌트에도 적용됩니다. 오버플로 콘텐츠는 보통 공간에 맞추거나 반복을 줄이기 위해 축소됩니다. 잘림(truncation)과 "Show more" 버튼은 오버플로 콘텐츠가 다른 곳이나 화면 아래에 계속됨을 나타내는 두 가지 방법입니다.
출처: Overflow content
본문
잘림 (Truncation)
잘림(단축)은 보통 컨테이너 크기를 초과하는 정적 텍스트나 링크에 사용됩니다. 잘린 항목은 줄임표 ...로 표현되며 텍스트 문자열에서 세 개 이상의 잘린 문자를 나타내야 합니다. 잘린 문자열에는 잘리지 않은 콘텐츠가 최소 네 자 이상 있어야 해요. 잘린 항목에는 항상 호버 시 전체 문자열, 이름, 또는 구를 보여주는 브라우저 툴팁이 포함됩니다. 브라우저 툴팁을 사용할 필요가 없는 유일한 경우는 잘린 문단의 끝입니다.
사용 (Usage)
잘림에 좋은 사용 사례:
- 브레드크럼 (Breadcrumbs)
- 페이지네이션 (Pagination)
- 긴 URL 링크
- 텍스트 문단(즉, 설명 문단)
- 긴 항목 이름 단축(사용자 또는 플랫폼 생성)
잘림은 페이지 헤더, 제목, 라벨, 오류 메시지, 검증 메시지, 알림에는 사용해서는 안 됩니다.
변형 (Variations)
잘림에는 세 가지 유형이 있습니다: 앞줄(front-line), 중간줄(mid-line), 끝줄(end-line).
| Type | Purpose | Default | Truncated |
|---|---|---|---|
| Front-line | 텍스트 문자열의 시작에 사용해 텍스트가 이전 위치에서 계속됨을 나타내요. | 123456789 |
...56789 |
| Mid-line | 여러 텍스트 문자열이 시작과/끝이 다르지만 정확히 같은 중간 문자를 가질 때 사용해요. 문자열의 끝을 줄임표로 자를 수 없을 때 구나 텍스트 문자열을 짧게 하는 데도 사용할 수 있습니다. | 123400005678 / 987600004321 |
1234...5678 / 9876...4321 |
| End-line | 문자 문자열이나 문단의 끝에 사용해 다른 위치에 더 많은 콘텐츠가 있음을, 시퀀스의 패턴이 계속됨을, 또는 긴 텍스트 문자열을 짧게 하는 것을 나타내요. | 123456789 |
12345... |
줄임표 단독 (Ellipses alone)
단독 줄임표도 콘덴스드 콘텐츠를 나타낼 수 있어요. 이 유형의 잘림은 브라우저 툴팁 대신 호버 시 오버플로 메뉴가 필요합니다.
코드 (Code)
앞줄과 끝줄 잘림을 사용하려면 아래의 적절한 클래스를 입력하고 title을 추가해 잘린 텍스트를 호버할 때 나타나는 브라우저 툴팁을 채우세요. 잘림이 시작될 위치를 계산하기 위해 컨테이너(또는 텍스트 요소 자체)의 width도 구성해야 합니다.
| Type | Class |
|---|---|
| Frontline | .cds--text-truncate--front |
| End-line | .cds--text-truncate--end |
예시 사용 (Example Usage)
<div class="container">
123456789
</div>
.container {
width: 65px;
}
.cds--front-line {
width: 100%;
display: inline-block;
direction: rtl;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
중간줄 잘림 (Mid-line truncation)
중간줄 잘림은 JavaScript가 필요하므로 자체 클래스가 없어요. CodePen의 이 예시에서 구현 방법을 볼 수 있습니다.
"Show more" 버튼 ("Show more" buttons)
"Show more" 버튼은 상당한 양의 오버플로 콘텐츠가 있을 때 사용됩니다. "Show more" 버튼을 구현하면 사용자가 콘텐츠를 한 번에 모두 대신 소화하기 쉬운 청크로 볼 수 있게 해줘요. 스크롤, 그라디언트, 페이드보다 더 눈에 띄고 실행 가능하므로 "Show more" 버튼이 그 대신에 사용됩니다. 필요하면 "Show less"를 사용해 사용자가 연 콘텐츠를 다시 숨길 수 있습니다. "Show more"는 성능이 우려되는 경우 "Load more"로 제시될 수도 있습니다. 자세한 내용은 Loading 섹션을 참고하세요.
더 알아보기 (Learn more)
오버플로 콘텐츠는 공간을 초과하는 텍스트나 컴포넌트 시퀀스를 줄이기 위한 패턴이에요. 잘림은 줄임표와 브라우저 툴팁을 사용하되 앞줄·중간줄·끝줄 중 상황에 맞게 고르고, 잘린 문자열은 최소 네 자의 비잘림 콘텐츠를 유지합니다. 상당한 양의 오버플로에는 "Show more" 버튼을 사용해 콘텐츠를 소화하기 쉬운 청크로 보여주는 게 좋습니다.