CSS 긴글 말줄임 처리하는 방법

장문의 글에 지정된 줄에서 줄임말 처리를 하고 나머지는 노출하지 않는 방법으로 글목록의 요약 내용이 필요 이상으로 많이 나올 때 이를 처리할 때 유용하게 사용할 수 있는 속성입니다.

 

 

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;

말줄임표를 표현하기 위해서 필수적으로 필요한 속성들로 하나라도 빠지게 되면 글줄임 기능을 하지 못하게 됩니다.

 

첫 번째 줄
두 번째 줄
세 번째 줄
네 번째 줄

 

<div> 첫 번째 줄<br />두 번째 줄<br />세 번째 줄<br />네 번째 줄 </div> 
<style>  
div { 
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    }
</style>

실제 줄 수는 4줄이지만 -webkit-line-clamp: 3 속성으로 3번 줄까지만 표현하며 말 줄임표를 넣고 나머지 줄은 요소에서 제외해버리며 마지막 줄에는 적용이 되지 않습니다.

 

 

첫 번째 줄
두 번째 줄
세 번째 줄
네 번째 줄

나머지 줄은 overflow: hidden 속성으로 감추어 주어야 하는 padding 값이 있으면 overflow가 적용되어도 패딩만큼 노출이 되기 때문에 아래쪽 패딩은 0으로 하여야 합니다.

 

 

첫 번째 줄
두 번째 줄
세 번째 줄
네 번째 줄
다섯 번째 줄

 

<div>  첫 번째 줄
두 번째 줄
세 번째 줄
네 번째 줄
다섯 번째 줄 </div> 

<style>
div {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden; 
}
</style>

작성된 글의 줄수는 5줄이 되지만 2번째 줄에서 말줄임 처리를 하고 overflow: hidden 속성을 추가하게 되면 높이를 지정할 필요없이 나머지 줄을 잘려서 나오지 않게 됩니다.