[CSS]1줄, 2줄 말줄임 표시 하는 방법

[CSS]

- 모든 컨텐츠의 내용을 보여줄 수 없을 때, 디자인적인 측면으로 말 줄임표를 사용합니다.

 

*조건

- 제목 1줄, 내용 3줄까지 노출되며, 영역이 넘어갈 시  말줄임표(...)를 표시합니다.

 

See the Pen Untitled by 현정 (@Celine__509) on CodePen.

1. width를 사용하지 않고 max-width를 사용한 이유는 컨텐츠 내용의 길이가 짧을 수도 있는 상황을 고려함.

2. text-overflow: ellipsis; 한 줄 표출을 할 때, 일정 width를 넘어갔을 경우, 말줄임표를(...) 위해 사용함.

3. white-space:normal 은 자동 줄 바꿈을 위해 사용함.

4. webkit-line-clamp CSS 속성은 블록 컨테이너의 콘텐츠를 지정한 줄 수만큼으로 제한합니다.

 - display 속성을 -webkit-box 또는 -webkit-inline-box로,  -webkit-box-orient (en-US) 속성을 vertical로 설정한 경우에만 동작합니다

 - webkit-line-clamp 속성은 영역 내의 컨텐츠의 최대 라인수를 결정합니다

 - webkit-box-orient: vertical 속성은 영역 박스의 내의 정렬을 수직으로 하도록 합니다.

 - IE에서는 브라우저 호환이 되지 않음

 

 

  

 

 

 

*참고

https://developer.mozilla.org/ko/docs/Web/CSS/white-space

https://developer.mozilla.org/ko/docs/Web/CSS/-webkit-line-clamp