[CSS] 텍스트 말줄임 처리

1. 한 줄 말줄임 처리

.dot {
  display: inline-block;
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

white-space: nowrap; 으로 문장이 정해진 공간을 넘어가더라도 줄바꿈되지 않게 처리한다.

그리고 overflow: hidden; 으로 넘치는 부분을 숨긴 뒤,

넘친 부분에 해당하는 text-overflow를 ellipsis로 함으로써, 말줄임표로 대체한다.

2. 여러 줄 말줄임 처리

.dot {
  display: inline-block;
  width: 300px;
  text-overflow: ellipsis;
  
  line-height: 1.2;
  height: 3.6em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

white-space 속성은 여러 줄인 경우에는 필요가 없다.

line-height로 한 줄의 높이를 설정하고, height로 최대 높이를 설정한 뒤,

webkit-box로 바꾸고 line-clamp로 최대 줄 수를 정해준다.

box-orient로 박스의 방향은 수직으로 한다.