css) 텍스트 넘치면 2줄이 아니라 ...처리 하려면?

계속 까먹어서 적어둔다.

 

.text {
  overflow: hidden; // 넘치는거 보이지 않게 처리
  white-space: nowrap; // 2줄 처리 안 되게
  text-overflow: ellipsis; // ... 처리
}

/* 참고점 
overflow나 white-space 설정이 저렇게 되어 있지 않으면 text-overflow는 작동하지 않는다.
그리고 부모 컨테이너의 width도 지정되어 있어야 한다.
*/

 

css in js이든 css이든 재사용 가능한 테마를 지원하므로 지정해서 원하는 곳에 추가해주면 좋다.