CSS word-wrap 속성으로 자동 줄 바꿈 처리하기

CSS의 word-wrap 속성은 단어가 컨테이너의 너비를 초과할 때 줄을 강제로 끊고 다음 줄로 넘겨주는 기능을 합니다. 특히 띄어쓰기 없이 길게 이어진 영어 단어나 URL처럼 한 단어가 매우 긴 경우에 유용하게 사용됩니다.

word-wrap 속성의 대표적인 값은 break-word로, 이 값을 지정하면 단어 중간에서도 줄 바꿈이 가능해져 텍스트가 부모 요소 밖으로 벗어나는 것을 방지할 수 있습니다.

예제

다음은 word-wrap 속성을 사용하는 기본 문법 예제입니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 200px;
            border: 2px solid #000000;
         }
         div.b {
            word-wrap: break-word;
         }
      </style>
   </head>
   <body>
      <h2>word-wrap: break-word 속성</h2>
      <div class = "b"> ThisisdemotextThisisdemotext:
      thisisaveryveryveryveryveryverylongword. 긴 단어가
      다음 줄로 넘어갑니다.</div>
   </body>
</html>

코드 설명

모든 div 요소에 너비 200px와 검은색 2px 실선 테두리를 적용했습니다.
클래스 b를 가진 div에는 word-wrap: break-word;를 설정하여, 너비를 초과하는 긴 단어가 자동으로 줄 바꿈되도록 했습니다.

실행 결과

위 코드를 실행하면, 띄어쓰기 없이 길게 연결된 단어가 div의 고정된 너비(200px) 안에서 강제로 줄이 바뀌어 다음 줄로 넘어가는 것을 확인할 수 있습니다.

CSS word-wrap 속성으로 자동 줄 바꿈 처리하기

참고 사항

현재 CSS 표준에서는 word-wrap 대신 overflow-wrap 속성이 공식 명칭으로 사용됩니다. 두 속성은 동일하게 동작하며, 호환성을 위해 overflow-wrap 사용을 권장합니다. 또한 overflow-wrap: anywhere;나 break-word 값과 함께 min-content 크기 계산에 활용하면 더욱 유연한 텍스트 배치가 가능합니다.