줄임표(Ellipsis)

줄임표 또는 생략 기호로 불리는 Ellipsis에 대해 알아보겠습니다.

보통 리스트에서 제목과 같은 항목이 길어져 여러 줄로 보이는 경우 layout이 중구난방이 되어 깔끔하지 못한 인상을 줍니다.

따라서 text가 길어지는 경우 몇 줄까지 보여주고 나머지는 생략 기호로 대체하는 방법을 사용합니다. 이 때 CSS로 ellipsis를 적용합니다.

한 줄만 보여주고 생략 기호를 처리할 수 있지만, 여러 줄을 보여주고 생략 기호를 처리하는 방법도 있으니 나누어 살펴보도록 하겠습니다.

한 줄 글자 수 제한

먼저 한 줄만 보여주고 한 줄이 벗어나 text가 존재하는 경우 생략 기호로 표시하는 경우를 살펴보겠습니다.

✅ 주의 사항 생략 기호인 Ellipsis는 Block-Level 태그에서만 적용됩니다.
display: inline-block;도 가능합니다. 단, display: flex;에서는 적용되지 않습니다.


.txt_line {
  width: 70px;
  overflow: hidden;
}


  overflow: hidden;
  text-overflow: ellipsis;
}


  text-overflow: ellipsis;
}


  text-overflow: ellipsis;
}

먼저 한 줄에 해당하는 width를 정해줍니다. 고정된 width가 존재한다는 것은 결국 Block-Level입니다. 따라서 여기에서 ‘display: block;‘을 하지 않아도 됩니다.

contents가 width의 길이에 넘쳐서 존재하는 경우 hidden 처리를 통해 width를 벗어나는 contents를 숨깁니다.

width 내의 text가 넘치는 경우 ellipsis를 통해 생략 기호 처리를 합니다.

이 설정을 통해 text가 길어도 자동으로 줄바꿈 되지 않게 처리합니다.

이제 한 줄이 아닌 여러 줄을 설정 한 후 생략 기호를 적용해 보겠습니다.


.txt_post {
  overflow: hidden;
  text-overflow: ellipsis;
}


  text-overflow: ellipsis;
}


  text-overflow: ellipsis;
}


  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
}


  -webkit-box-orient: vertical;
}

영역을 벗어나는 contents는 hidden으로 숨김 처리를 합니다.

text가 영역을 벗어나는 경우 생략 기호(...)로 처리를 합니다.

해당 영역을 box 형태로 관리합니다.

3줄이 넘어가면 생략 기호로 처리 하고자 합니다. ‘3’ 대신 보이기 원하는 줄의 숫자를 적으면 됩니다.

영역 box 내의 정렬을 수직 정렬합니다.


.txt_line {
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  white-space: nowrap;
}


  -webkit-box-orient: vertical;
}

한 줄 글자 수 제한하는 경우 overflow, text-overflow, white-space 처리를 합니다. Block-Level 요소여야 하므로 display = inline-block; 또는 width를 정합니다.

여러 줄 글자 수 제한하는 경우 한 줄과 마찬가지로 overflow, text-overflow 처리를 합니다. 여러 줄 인 경우 display = -webkit-box;로 설정하고 line 수를 정합니다.