css로 한줄/ 여러줄 말줄임표 만들기

 

 

1. 한줄 말줄임표 만들기

 

우선 말줄임표를 만들기 위해서는 max-width 나 width가 존재해야하며, width가 적용되기 위해서는 display속성이 block 혹은 inline-block 이어야합니다.

 

 

그리고 아래 세 코드를 추가하면 한줄짜리 말줄임표는 끝입니다.

div{
white-space: nowrap; /*텍스트가 줄바꿈 되지 않게 해줌*/
overflow: hidden; /*영역을 벗어난 텍스트는 보이지 않게 해줌*/
text-overflow: ellipsis; /*영역을 벗어난 텍스트가 있을경우 말줄임표 ...으로 만들어줌*/
}

 

<예시>

See the Pen Untitled by sott120 (@sott120) on CodePen.

 

 

 

 

 

 

 

2. 두줄 이상 말줄임표 만들기

 

한줄 말줄임표만 text-overflow 속성을 사용하고, 나머지 두줄 이상부터는 -webkit-line-clamp라는 것을 사용합니다. (webkit 기반 속성은 익스플로러 환경에서는 지원하지 않으니 참고)

-webkit-line-clamp을 몇으로 설정하는지에 따라 원하는 줄의 말줄임표를 만들 수 있습니다.

div{
    overflow: hidden; /*영역을 벗어난 텍스트는 보이지 않게 해줌*/
    text-overflow: ellipsis; /*영역을 벗어난 텍스트가 있을경우 말줄임표 ...으로 만들어줌*/
    display: -webkit-box; /*-webkit-box값이 있어야 아래의 속성들 적용이 가능*/
    -webkit-line-clamp: 2; /*텍스트를 몇 줄까지 보여줄 지 정하는 속성*/
    -webkit-box-orient: vertical; /*박스 내의 정렬을 수직으로 만들어줌*/
    }

 

<예시>

See the Pen Untitled by sott120 (@sott120) on CodePen.