HTML DOM whiteSpace 속성 완벽 가이드 – 텍스트 공백과 줄바꿈 처리 방법

HTML DOM의 whiteSpace 속성은 HTML 문서에서 특정 요소 내 텍스트의 탭(tab), 줄바꿈(line break), 공백(whitespace)을 브라우저가 어떻게 처리할지 확인하고 변경하는 데 사용됩니다. 이 속성을 활용하면 텍스트가 화면에 배치되는 방식을 세밀하게 제어할 수 있습니다.

문법(Syntax)

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

whiteSpace 값 가져오기(반환)

object.style.whiteSpace

whiteSpace 값 설정하기(수정)

object.style.whiteSpace = "value";

속성값(Value) 종류와 설명

whiteSpace 속성에 지정할 수 있는 값은 아래 표와 같습니다.

속성값	설명
initial	해당 속성값을 브라우저의 기본(default) 값으로 되돌립니다.
inherit	부모(parent) 요소의 whiteSpace 속성값을 상속받습니다.
normal	연속된 공백 시퀀스가 하나의 공백으로 병합되며, 필요할 때 텍스트가 자동으로 줄바꿈됩니다.
nowrap	연속된 공백은 하나로 병합되지만, 텍스트가 다음 줄로 넘어가지 않습니다.
pre	브라우저가 공백을 그대로 보존하며, 명시적인 줄바꿈 문자가 있을 때만 텍스트가 줄바꿈됩니다.
pre-line	연속된 공백은 하나로 병합되고, 필요한 경우에만 텍스트가 다음 줄로 넘어갑니다.
pre-wrap	공백은 브라우저에 의해 그대로 보존되며, 필요한 경우에만 텍스트가 다음 줄로 넘어갑니다.

예제(Example)

다음은 HTML DOM style whiteSpace 속성을 활용한 실습 예제입니다. 버튼을 클릭하면 단락(p) 요소의 공백 처리 방식이 pre-line으로 변경됩니다.

<!DOCTYPE html>
<html>
<head>
<style>
    body {
       color: #000;
       background: lightblue;
       height: 100vh;
    }
    p {
       border: 2px solid #fff;
    }
    .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 whiteSpace Property Example</h1>
<p>
    I'm paragraph element with some dummy text. I'm paragraph element with some dummy text.
    I'm paragraph element with some dummy text. I'm paragraph element with some dummy text.
    I'm paragraph element with some dummy text.
</p>
<button onclick="add()" class="btn">Change whiteSpace</button>
<script>
    function add() {
       document.querySelector('p').style.whiteSpace = "pre-line";
    }
</script>
</body>
</html>

실행 결과(Output)

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

HTML DOM whiteSpace 속성 완벽 가이드 – 텍스트 공백과 줄바꿈 처리 방법

화면에서 [Change whiteSpace] 버튼을 클릭하면, 단락(p) 요소의 공백 및 줄바꿈 처리 방식이 pre-line으로 즉시 변경되는 것을 확인할 수 있습니다.

HTML DOM whiteSpace 속성 완벽 가이드 – 텍스트 공백과 줄바꿈 처리 방법

참고 사항

whiteSpace 속성은 CSS의 white-space 속성과 동일하게 동작하며, 모든 최신 브라우저(Chrome, Firefox, Safari, Edge, Opera)에서 폭넓게 지원됩니다. 코드 편집기처럼 들여쓰기와 줄바꿈을 그대로 유지해야 하는 UI를 만들 때는 pre 또는 pre-wrap 값을, 긴 텍스트가 한 줄로 표시되도록 강제해야 할 때는 nowrap 값을 사용하는 것이 좋습니다.