[CSS3] line-clamp

---

알고있으면 좋은 CSS3 Tip✨

---

line-clamp란 무엇인가?

• 블록 컨테이너의 콘텐츠를 지정한 줄 수만큼으로 제한할 수 있는 속성이다.

 

(1) 사용 방법

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;

• display 속성을 webkit-box 또는 webkit-inline-box로 설정한다.
• -webkit-box-orient 속성을 vertical로 설정한 경우에만 동작한다.
• 단순히 요소의 줄 수만 제한하기 때문에 overflow: hidden 속성과 함께 사용하면 요소를 넘치는 텍스트를 감출 수 있다.