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

📌 문제 설명

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

요구사항

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

💡 해결 방법

기본 구현 (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 멀티라인 말줄임 가이드