[CSS] 말줄임(…) 적용하기

생각보다 많이 사용하게 되는 말줄임(…).
잊어버리지 않기 위해 문장이 1줄일 경우와, 2줄 이상일 경우로 나누어 정리해보고자 한다!

문장이 1줄일 때

See the Pen ellipsis (1 line) by jiyeon2y (@jiyeon2y) on CodePen.

• overflow: hidden; : 영역 밖으로 넘치는 요소를 숨김
• text-overflow: ellipsis; : 글자가 넘어가면 말줄임 적용
• white-space: nowrap; : 텍스트를 한 줄로 유지되도록 함

문장이 2줄일 때

webkit 속성을 지원하는 브라우저에서만 말줄임 효과가 적용된다. (IE 에서는 적용되지 않음)

See the Pen Untitled by jiyeon2y (@jiyeon2y) on CodePen.

• overflow: hidden;
• text-overflow: ellipsis;
• display: -webkit-box; : 요소를 박스 레이아웃 모델로 표시하도록 설정
• -webkit-line-clamp: 2; : 지정한 라인 수만큼만 보이도록 제한함

• -webkit-box-orient: vertical; : 배치 방향 (가로 or 세로) 설정
  
  
  

• 2줄 이상 시 주의할 점
  • white-space: nowrap; 은 한 줄로 유지되게 하는 속성이므로 작성하지 않아야 함
  • padding값이 적용되면 여백에 문자열이 숨겨지지 않고 나타날 가능성이 있으므로 주의해야 함
  • 지정한 라인 수보다 실제 라인 수가 더 크면 말줄임 효과가 적용되지 않음
  • height: 지정한 라인 수 * line-height 값; 을 적용하면 문장 길이가 줄어들어도 height 값이 고정됨