CSS - 오버플로우 처리하는 방법

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 속성을 적절히 사용하여 사용자에게 깔끔하고 가독성 높은 텍스트 레이아웃을 제공할 수 있다.