텍스트 단축 방법 (CSS로 단일 및 다중 줄 처리)
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 대상자: 프론트엔드 개발자, 웹 디자이너, CSS 전문가
- 난이도: 중급 (CSS 레이아웃 및 텍스트 처리 기술 필요)
핵심 요약
- 단일 줄 텍스트 단축:
text-overflow: ellipsis와white-space: nowrap을 사용하여 줄바꿈 없이 말줄임 표시 - 다중 줄 텍스트 단축:
-webkit-line-clamp속성과display: -webkit-box를 결합해 지정된 줄 수만큼 텍스트 제한 - 브라우저 호환성 고려:
-webkit-접두사 사용 시 Safari 및 Chrome 호환성 확보, IE 지원 제한됨
섹션별 세부 요약
1. 단일 줄 텍스트 단축 기법
text-overflow: ellipsis를 사용해 텍스트가 컨테이너를 벗어날 경우 말줄임표(...) 표시white-space: nowrap을 결합해 줄바꿈 방지overflow: hidden으로 넘치는 텍스트 숨기기- 예시:
```css
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
```
2. 다중 줄 텍스트 단축 기법
-webkit-line-clamp: 2로 최대 2줄까지 텍스트 표시display: -webkit-box와line-clamp속성을 함께 사용해 CSS 박스 모델 기반 레이아웃-webkit-box-orient: vertical로 세로 방향으로 텍스트 정렬- 예시:
```css
.multi-line-truncate {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
```
3. 브라우저 호환성 및 한계
-webkit-line-clamp은 Safari 12+, Chrome 70+에서만 지원- IE 및 Edge는 현재까지 완전한 지원 없음
- 대안: JavaScript 기반 텍스트 단축 라이브러리 사용 권장
결론
- 단일 줄:
text-overflow: ellipsis와white-space: nowrap사용 - 다중 줄:
-webkit-line-clamp와display: -webkit-box조합 적용 - 브라우저 호환성:
-webkit-접두사 사용 시 최신 버전 브라우저 중심으로 개발, IE 지원 필요 시 JavaScript 대체 솔루션 고려