⭐️ CSS 멀티라인 말줄임표 구현하기 ✂️

·2025년 1월 13일

⭐️ Style

목록 보기
3/5

📌 문제 설명

여러 줄의 텍스트를 특정 줄 수로 제한하고 말줄임표(...) 처리하는 방법

요구사항

  • 텍스트가 지정된 줄 수를 초과할 경우 말줄임표 표시
  • 브라우저 호환성 고려
  • 반응형 디자인 지원

💡 해결 방법

기본 구현 (Webkit 브라우저)

.multi-line-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
}

브라우저 호환성을 위한 대체 방법

.multi-line-ellipsis-fallback {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  max-height: 4.5em; /* line-height * 줄 수 */
  white-space: normal;
}

🔍 코드 설명

속성별 역할

  1. display: -webkit-box

    • 플렉스 컨테이너처럼 동작
    • 텍스트 박스 내 배치 제어
  2. -webkit-box-orient: vertical

    • 텍스트 방향을 수직으로 설정
    • 줄바꿈 처리
  3. overflow: hidden

    • 넘치는 텍스트 숨김 처리
  4. text-overflow: ellipsis

    • 숨겨진 텍스트 대신 ... 표시
  5. -webkit-line-clamp

    • 표시할 줄 수 제한

✨ 새롭게 배운 점

  1. CSS 속성의 조합

    • 여러 속성을 조합하여 복잡한 UI 구현
    • 브라우저별 대체 방안 설계
  2. 브라우저 호환성

    • webkit 접두사의 의미와 사용
    • 크로스 브라우저 대응 방법

🚀 이런 점이 효율적이에요

  • 간단한 CSS로 복잡한 UI 구현
  • 다양한 브라우저 지원
  • 반응형 디자인에 적합
  • JavaScript 없이 순수 CSS로 구현 가능

⭐️ 참고 자료

  • MDN CSS 참고 문서
  • Can I Use (브라우저 호환성 체크)
  • CSS-Tricks 멀티라인 말줄임 가이드
profile
주니어 프론트엔드 성장기 기록기록

0개의 댓글