CSS에서 텍스트 줄바꿈과 오버플로우 정리

1. 텍스트 줄바꿈 안하기: white-space: nowrap;

텍스트가 줄 바꿈 없이 한 줄로 유지된다. 

.nowrap {
  white-space: nowrap;
}

2. 텍스트 오버플로우 처리: overflow / text-overflow

overflow: hidden;

컨테이너를 벗어나는 텍스트 숨기기

.hidden { overflow: hidden; }

text-overflow: ellipsis;

오버플로우되는 텍스트를 ...으로 표시. 텍스트가 한 줄일 때만 작동한다.

.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }​

3. 텍스트 줄바꿈 허용: white-space 기본값

기본적으로 HTML 요소는 텍스트 줄바꿈을 허용한다. (white-space 속성의 기본값인 normal.

.normal { white-space: normal; }​

4. 여러 줄에서의 텍스트 오버플로우 처리

overflow-wrap: break-word;

긴 단어가 있는 경우 자동으로 줄바꿈

.break-word { overflow-wrap: break-word; }​

위와 같이 white-space, overflow, text-overflow 속성을 적절히 사용하여 사용자에게 깔끔하고 가독성 높은 텍스트 레이아웃을 제공할 수 있다.