css 말줄임 구현

사이드 프로젝트를 만들다가 말줄임 구현을 할 경우가 생겼습니다.

결과는 다음과 같습니다.

 

 

핵심 코드는 다음과 같습니다.

 

display: -webkit-box; line-clamp와 box-orient를 사용하기 위해
overflow: hidden; // 영역을 넘으면 글자 안보이게
text-overflow: ellipsis; // ...를 표시하기 위해서 사용 
-webkit-line-clamp: 2; // 2줄이상 넘으면 ... 표시
-webkit-box-orient: vertical;

 

1줄일 경우는 line-clamp 대신에 white-space : no-wrap으로 표현이 가능합니다.