HTML DOM 스타일의 whiteSpace 속성은 HTML 문서의 요소 텍스트에서 탭, 줄 바꿈 및 공백을 처리하는 방법을 반환하고 수정합니다.
구문
다음은 구문입니다 -
-
공백 반환
object.style.whiteSpace
-
공백 수정
object.style.whiteSpace = “value”
값
여기서 값은 -
일 수 있습니다.| 값 | 설명 |
|---|---|
| 초기 | 이 속성 값을 기본값으로 설정합니다. |
| 상속 | 상위 요소에서 이 속성 값을 상속합니다. |
| 보통 | 여기에서 공백 시퀀스는 하나로 축소되고 필요한 경우 텍스트가 줄 바꿈됩니다. |
| 현재 랩 | 여기에서 공백 시퀀스는 하나로 축소되고 텍스트는 다음 줄로 줄바꿈되지 않습니다. |
| 이전 | 여기에서 공백은 브라우저에 의해 유지되며 텍스트는 줄 바꿈이 발생할 때만 줄바꿈됩니다. |
| 선행 | 여기서 공백 시퀀스는 하나로 축소되고 텍스트는 필요할 때만 다음 줄로 줄바꿈됩니다. |
| 미리 포장 | 여기에서 공백은 브라우저에 의해 유지되며 텍스트는 필요할 때만 다음 줄로 줄 바꿈됩니다. |
예시
HTML DOM 스타일의 whiteSpace 속성의 예를 살펴보겠습니다. -
<!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> 출력
이것은 다음과 같은 출력을 생성합니다 -
"공백 변경을 클릭합니다. 단락 요소의 공백을 처리하는 방법의 동작을 변경하는 "버튼 -
