CSS에서 word-wrap 속성을 사용하면 요소의 너비를 벗어나는 긴 단어나 텍스트를 강제로 줄을 끊어 다음 줄로 넘겨 표시할 수 있습니다. 특히 띄어쓰기 없이 이어진 아주 긴 단어(예: URL이나 영문 문자열)가 컨테이너 밖으로 삐져나가는 문제를 해결할 때 유용합니다.
아래 예제 코드를 실행하면 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.
The long word wraps to the next line.</div>
</body>
</html>코드 설명
- 모든
<div>요소에 너비 200px와 검은색 2px 테두리를 지정했습니다. div.b클래스에는word-wrap: break-word;를 적용하여, 단어의 중간이라도 컨테이너 너비를 초과하면 강제로 줄바꿈이 일어납니다.
실행 결과
위 출력 화면에서 볼 수 있듯이, 띄어쓰기 없이 길게 이어진 단어도 break-word 값 덕분에 지정된 너비 안에서 줄이 끊기고 다음 줄로 자연스럽게 넘어갑니다.
참고 사항
word-wrap은 현재 overflow-wrap이라는 표준 이름으로 대체되었으며, 최신 브라우저에서는 overflow-wrap: break-word; 사용을 권장합니다. 다만 하위 브라우저 호환성을 위해 두 속성을 함께 선언하는 것이 안전합니다.