웹 페이지를 개발하다 보면 띄어쓰기 없이 이어진 아주 긴 문자열이나 URL 때문에 요소의 영역을 벗어나는 문제를 겪게 됩니다. 이럴 때 JavaScript의 wordWrap 속성을 사용하면 긴 단어를 강제로 잘라내어 다음 줄로 자연스럽게 줄바꿈할 수 있습니다.
wordWrap 속성이란?
wordWrap 속성은 컨테이너의 너비보다 긴 단어가 있을 때 해당 단어를 어느 지점에서든 끊어서 다음 줄로 넘기도록 허용하는 CSS 스타일 속성입니다. JavaScript에서는 style.wordWrap을 통해 동적으로 설정할 수 있으며, 값으로 break-word를 지정하면 됩니다.
예제 코드
아래 예제는 버튼을 클릭하면 박스 영역 안의 긴 텍스트가 잘려서 다음 줄로 줄바꿈되도록 wordWrap 속성을 적용하는 방법을 보여줍니다. 직접 실행해 보면서 동작 방식을 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
width: 150px;
height: 150px;
background-color: lightblue;
border: 1px solid black;
}
</style>
</head>
<body>
<button onclick = "display()">Set</button>
<div id = "box">
ThisisDemoText.ThisisDemoText.ThisisDemoText.ThisisDemoText.Thisis DemoText.ThisisDemoText.
</div>
<script>
function display() {
document.getElementById("box").style.wordWrap = "break-word";
}
</script>
</body>
</html>코드 설명
- #box 스타일: 가로·세로 150px 크기의 박스를 만들고 연한 파란색 배경과 검은색 테두리를 지정합니다.
- 버튼 클릭 이벤트:
display()함수가 호출되어 박스 요소에 접근합니다. - wordWrap 적용:
style.wordWrap = "break-word"를 설정하면 띄어쓰기 없이 붙어 있는 긴 텍스트도 박스 너비에 맞춰 잘려서 다음 줄로 넘어갑니다.
참고 사항
wordWrap은 현재 표준에서는 overflow-wrap 속성으로 대체되었으며, 최신 브라우저에서는 overflow-wrap: break-word 또는 더 유연한 overflow-wrap: anywhere 사용이 권장됩니다. 다만 하위 호환성을 위해 여전히 많은 환경에서 wordWrap이 정상적으로 동작합니다.