HTML DOM wordWrap 속성 – 긴 단어 자동 줄바꿈 처리 방법

HTML DOM의 wordWrap 속성은 HTML 문서에서 지정된 너비를 벗어나는 긴 단어를 강제로 잘라내어 다음 줄로 넘기도록(줄바꿈) 설정하거나, 현재 적용된 값을 가져올 때 사용합니다.

문법(Syntax)

wordWrap 속성의 기본 문법은 다음과 같습니다.

1. 값 가져오기

object.style.wordWrap

2. 값 설정하기

object.style.wordWrap = "value"

속성 값(Value)

wordWrap 속성에 사용할 수 있는 값은 아래와 같습니다.

값	설명
initial	이 속성을 기본값으로 초기화합니다.
inherit	부모 요소로부터 이 속성 값을 상속받습니다.
normal	필요한 경우에만 단어를 잘라서 줄바꿈합니다.
break-word	일반적으로 줄바꿈할 수 없는 긴 단어도 필요에 따라 잘라서 줄바꿈을 허용합니다.

예제(Example)

HTML DOM style wordWrap 속성의 실제 동작 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        background: lightblue;
        height: 100vh;
    }
    p {
        border: 2px solid #fff;
        width: 100px;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem 0;
    }
</style>
</head>
<body>
<h1>DOM Style wordWrap 속성 예제</h1>
<p>This is a paragraph element. This is a veryveryveryverylongword. This is another veryveryverylongword.</p>
<button onclick="add()" class="btn">Set wordWrap</button>
<script>
    function add() {
        document.querySelector('p').style.wordWrap = "break-word";
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM wordWrap 속성 – 긴 단어 자동 줄바꿈 처리 방법

버튼을 클릭하기 전에는 긴 단어가 요소의 너비를 벗어나 그대로 표시됩니다. 이제 “Set wordWrap” 버튼을 클릭해 보세요.

HTML DOM wordWrap 속성 – 긴 단어 자동 줄바꿈 처리 방법

버튼을 클릭하면 break-word 값이 적용되어, 기존에 줄바꿈되지 않던 긴 단어들이 요소 너비에 맞춰 잘리고 다음 줄로 넘어가는 것을 확인할 수 있습니다.