웹 개발을 하다 보면 지정된 너비보다 긴 단어나 텍스트가 컨테이너 밖으로 삐져나오는 오버플로우(overflow) 현상을 자주 마주하게 됩니다. 이런 문제를 해결하려면 CSS3의 word-wrap 속성을 활용하면 됩니다.
word-wrap 속성의 값을 break-word로 설정하면, 단어가 컨테이너 너비를 초과할 경우 강제로 끊어서 다음 줄로 넘겨줍니다. 반면 기본값인 normal은 긴 단어를 끊지 않기 때문에 요소 밖으로 텍스트가 넘쳐 흐르게 됩니다.
예제 코드
아래 예제는 두 개의 div 요소에 서로 다른 word-wrap 값을 적용하여 오버플로우 텍스트 처리 방식을 비교한 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
border: 3px solid #3008c0;
}
div.one {
width: 200px;
word-wrap: normal;
}
div.two {
width: 200px;
word-wrap: break-word;
}
</style>
</head>
<body>
<h1>Div1</h1>
<div class="one">
Lorem ipsum dolor sitametconsecteturadipisicjhbjhgjingelit. Rerum, beatae.
</div>
<h1>Div2</h1>
<div class="two">
Lorem ipsum dolor sitametconsecteturadipisicjhbjhgjingelit. Rerum, beatae.
</div>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
코드 설명
- div.one:
word-wrap: normal;이 적용되어 있어 띄어쓰기 없이 이어진 긴 단어가 200px 너비를 초과해도 끊어지지 않고 경계선 밖으로 넘쳐 나타납니다. - div.two:
word-wrap: break-word;가 적용되어 있어 긴 단어가 컨테이너 너비를 벗어나면 자동으로 잘려 다음 줄로 이동합니다.
참고 사항
현재는 overflow-wrap 속성이 표준으로 권장되며, word-wrap은 하위 호환성을 위해 여전히 모든 주요 브라우저에서 지원되고 있습니다. 최신 코드에서는 overflow-wrap: break-word; 또는 더 세밀한 제어가 가능한 overflow-wrap: anywhere;를 사용하는 것이 좋습니다.