텍스트의 길이가 over됐을 때 CSS에서 '...' 처리하기 (text-overflow: ellipsis)

 

 

 

 

title이 일정 높이를 넘어갈 경우 "..."로 처리되도록 하려면 아래의 코드를 추가하면 된다.

.title {
  max-width: 300px;
  height: 60px;
  
  overflow: hidden;
  white-space: nowrap; /* 텍스트가 한 줄로만 나오도록 설정 */
  text-overflow: ellipsis; /* 초과하는 텍스트에 "..." 추가 */
}

 

 

 

 

하지만 나는 두번째줄부터 ... 처리가 되길 원했기 때문에 텍스트를 최대 2줄까지만 표시하도록 하는 속성을 추가하였다.

 

    .title {
      font-size: 16px;
      max-width: 300px;
      height: 55px;
      padding: 4px 12px;
      
      white-space: normal;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2; /* 두 번째 줄까지 표시하고 그 이후는 "..."으로 처리 */
      -webkit-box-orient: vertical;
    }

 

이 속성은 WebKit 계열 브라우저에서만 지원되기 때문에 모든 브라우저에서 동작하지 않을 수 있다.