[css] 말 줄임 표기

텍스트 양이 많을 때, 말 줄임표로 표기하는 경우가 많은데,
한 줄일 경우와 두 줄 이상일 때 설정하는 방법이 각각 다르다.

(두 줄 이상일 경우는 위 이미지처럼 네이버 홈페이지에서 확인 가능하다!)

1. 한줄

1) 코드

display: block;
overflow: hidden;
white-spacing: nowrap;
text-overflow: ellipsis

2) 속성

• 블록 처리
• 텍스트 넘치는 부분은 overflow : hidden
• white-spacing: nowrap; 자동 줄바뀜 방지
• ellipsis 말줄임 표시

2. 두 줄 이상

1) 코드

display: -webkit-box;
overflow: hidden;
white-space: normal;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

2) 속성

• display: box;는 box를 수직, 수평으로 배치한다.
  반응형 웹과 IOS, 안드로이드 등 모바일 지원되는 태그이다.
  (-webkit-은 크로스 브라우징 접두사)
• 텍스트 넘치는 부분은 overflow : hidden
• white-space: normal; normal 설정을 통해 자동 줄바뀜 설정
• line-clamp : 지정하고자 하는 텍스트 줄의 개수 지정 line-clamp
• box-orient: vertical; 은 박스 영역 내의 정렬을 수직으로 지정