HTML DOM style wordBreak 속성 완벽 정리

HTML DOM의 style.wordBreak 속성은 HTML 문서 내에서 중국어, 일본어, 한국어가 아닌 문자(스크립트)의 줄바꿈 규칙을 가져오거나 수정할 때 사용됩니다. 영어처럼 공백으로 단어가 구분되지 않는 긴 텍스트나 URL 등이 화면 밖으로 넘치는 것을 방지하고 싶을 때 특히 유용합니다.

문법(Syntax)

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

1. 현재 값 가져오기

object.style.wordBreak

2. 값 설정하기

object.style.wordBreak = "value"

속성 값(Values)

wordBreak 속성에 지정할 수 있는 값은 다음과 같습니다.

값	설명
initial	해당 속성 값을 브라우저의 기본(default) 값으로 되돌립니다.
inherit	부모 요소로부터 이 속성 값을 상속받습니다.
normal	일반적인 단어 분리 규칙에 따라 줄을 바꿉니다. 기본 동작입니다.
keep-all	글자와 글자 사이에서의 줄바꿈을 허용하지 않습니다. 단어 단위로만 줄바꿈이 일어납니다.
break-all	임의의 두 글자 사이 어디서든 줄바꿈이 가능합니다. 긴 단어도 컨테이너 너비에 맞춰 잘립니다.

예제 코드

아래는 HTML DOM style wordBreak 속성을 활용한 실제 예제입니다. 버튼을 클릭하면 문단(p) 요소의 wordBreak 값이 break-all로 변경됩니다.

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        background: lightblue;
        height: 100vh;
    }
    p {
        border: 2px solid #fff;
        width: 120px;
    }
    .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 wordBreak Property Example</h1>
<p>Thisisaparagraphelement.</p>
<button onclick="add()" class="btn">Set wordBreak</button>
<script>
    function add() {
        document.querySelector('p').style.wordBreak = "break-all"
    }
</script>
</body>
</html>

실행 결과

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

HTML DOM style wordBreak 속성 완벽 정리 – 문법, 값, 예제까지

여기서 “Set wordBreak” 버튼을 클릭하면, 문단 안의 공백 없이 붙어 있는 긴 단어가 컨테이너 너비에 맞게 강제로 줄바꿈되는 것을 확인할 수 있습니다.

HTML DOM style wordBreak 속성 완벽 정리 – 문법, 값, 예제까지

정리

wordBreak 속성은 특히 공백 없이 이어진 긴 텍스트(URL, 파일명, 해시값 등)가 레이아웃을 깨뜨리는 것을 막을 때 유용합니다. 단어 단위 줄바꿈을 유지하려면 keep-all, 어떤 위치든 강제로 줄을 바꾸려면 break-all을 사용하면 됩니다.