[ CSS 응용 ] CSS로 텍스트 말줄임(...)으로 처리 방법 정리 (1줄, 2줄)

 

| 개요

일정한 영역안에 텍스트를 넣을때마다 텍스트가 길어짐에 따라 디자인이 깨져버리는 것을 방지하기 위해 CSS를 활용해서도 텍스트를 말줄임 처리를 할 수 있습니다. 데이터를 보내줄때 아에 일정한 길이로 잘라서 보내줄수는 있지만 특수기호나 숫자, 띄어쓰기 등에 의해 길이가 좀 다르게 표현이 되어 본인은 CSS를 이용한 ellipsis(...) 텍스트 말줄임 방식을 좀 더 선호한다. 

그러면 텍스트를 어떻게 CSS를 이용해 말줄임(...) 표시를 할 수 있는지 알아보자.

 

 

| 한 줄 말줄임 표시

 

.text-box {
   display: block; /* 객체의 너비 설정 */
   white-space: nowrap; /* 자동 줄바꿈 막기 */
   overflow: hidden;  /* 영역 이상 넘어가면 감춤 처리 */
   text-overflow: ellipsis;  /* 텍스트가 넘어가면 말줄임 표기 */
}

 

위 CSS코드를 보면 'text-box' 라는 class명을 가진 객체를 한줄 형태로 만들어 일정 영역 이상에서는 감춤 처리와 함께 ellipsis로 말줄임 표시를 설정하였습니다.

이렇게 진행시에는 무조건 한줄 형태만 가능하기에 2줄 이상을 표현하면서 말줄임 표시를 하려면 일부 설정을 바꾸어 주어야 한다.

 

| 두 줄 이상 말줄임 표시

.text-box {
   width: 300px; /* 일정한 크기의 영역 사이즈 지정 필요 */
   white-space: normal; /* 기본 텍스트 줄바꿈 형태 */
   overflow: hidden;  /* 영역 이상 넘어가면 감춤 처리 */
   display: -webkit-box; /* 객체의 너비 설정 */
   -webkit-box-orient: vertical; /* 텍스트 줄의 배치 */
   -webkit-line-clamp: 2; /* 텍스트가 표현될 줄(라인) 수 */
}

 

위 CSS코드는 한줄과 달리 줄바꿈에 있어서는 기본으로 두고 line-clamp과 box-orient로 줄수를 제한하여 말줄임 표시를 설정한다. 

가장 상단의 width값은 객체의 크기 상태에 따라 변형하여 사용하면 두줄, 세줄 원하는 줄 수에서 말줄임 표시를 사용할 수 있다.