CSS로 말줄임표를 넣는 방법

글자 데이터의 길이는 그때그때 다르기 때문에

레이아웃에 맞추기 위해 말줄임표를 써야하는 경우가 더러 있다.

한 줄부터 시작하여 여러 줄에서 말줄임표를 쓰는 방법에 대해서 다루겠다.

 

한 줄 말줄임표

한 줄 말줄임표는 간단하다.

다음 코드만 넣으면 된다.

 

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* display: block; */
}

 

위에부터 적용 전과 적용 후

 

글자가 길어져 block의 오른쪽 끝을 넘어가면 ...이 붙는다.

아무리 글자가 길어도 한 줄만 표시된다.

다만 display: block;일 때에만 작동을 하기 때문에 주의해야 한다.

 

두 줄 이상일 때의 말줄임표

webkit 계열의 브라우저인 경우

다음 코드를 넣으면 두 줄 이상일 때에도 말줄임표를 넣을 수 있다.

 

.ellipsis-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 줄의 수 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

 

-webkit-line-clamp에 따라 최대 줄 수가 결정되고 넘어가면 말줄임표가 생긴다.

 

-webkit-line-clamp를 2로 했을 때와 3으로 했을 때