JavaScript에서 텍스트 내의 탭(tab), 줄 바꿈(line break), 공백(whitespace)을 제어하려면 whiteSpace 속성을 사용하면 됩니다. 이 속성은 CSS의 white-space 속성과 동일하게 동작하며, normal, nowrap, pre, pre-wrap, pre-line 등 다양한 값을 설정할 수 있습니다.
whiteSpace 속성의 주요 값
- normal: 기본값으로, 연속된 공백은 하나로 합쳐지고 텍스트가 자동으로 줄 바꿈됩니다.
- nowrap: 공백은 합쳐지지만, 줄 바꿈은 발생하지 않습니다.
- pre: HTML의
<pre>태그처럼 동작합니다. 공백과 줄 바꿈이 원본 그대로 유지되며, 줄 바꿈 문자가 있을 때만 줄이 바뀝니다. - pre-wrap: 공백과 줄 바꿈을 유지하면서도, 필요에 따라 자동으로 줄 바꿈이 일어납니다.
- pre-line: 연속된 공백은 합쳐지지만, 줄 바꿈은 원본 그대로 유지됩니다.
예제 코드
아래 예제는 버튼을 클릭했을 때 whiteSpace 속성을 pre로 설정하여, div 요소 안의 텍스트가 탭과 줄 바꿈을 그대로 보존한 채 출력되도록 하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
width: 300px;
height: 100px;
border: 2px solid black;
background-color: gray;
}
</style>
</head>
<body>
<button onclick="display()">Set</button>
<div id="box">
This is Demo Text.
This is Demo Text.
This is Demo Text.
This is Demo Text.
This is Demo Text.
</div>
<script>
function display() {
document.getElementById("box").style.whiteSpace = "pre";
}
</script>
</body>
</html>코드 설명
위 코드의 핵심은 다음 한 줄입니다:
document.getElementById("box").style.whiteSpace = "pre";버튼을 클릭하면 display() 함수가 실행되어 id가 box인 요소의 whiteSpace 스타일이 pre로 변경됩니다. 그 결과, HTML 소스상의 들여쓰기와 줄 바꿈이 화면에 그대로 반영됩니다. 만약 이 속성을 설정하지 않으면(즉, normal 상태라면) 연속된 공백과 줄 바꿈이 무시되고 텍스트가 한 문단으로 이어져 표시됩니다.
정리
텍스트의 공백과 줄 바꿈 형식을 그대로 유지해야 하는 경우, JavaScript에서는 element.style.whiteSpace = "pre"를 사용하면 됩니다. 상황에 따라 nowrap(줄 바꿈 방지), pre-wrap(공백 유지 + 자동 줄 바꿈) 등의 값을 활용하면 더욱 유연하게 텍스트 레이아웃을 제어할 수 있습니다.