[css] white-space 여백 공백 처리 속성(pre, pre-wrap,pre-line) , br 태그 먹을까?

 

 

 

 

html에 내용을 넣을때, white-space 속성을 사용하는 경우가 있습니다. 

여백과 공백을 다루는 white-sapce 속성에 대해서 조금더 자세히 알아봤어요!

줄바꿈 부분이 각 속성마다 다르기에 문득,, 

br 태그를 통해 줄바꿈이 가능한지 궁금 했습니다. 

 

	공백과 들여쓰기	줄바꿈
normal	공백 여러개가 있어도 1개만 적용	자동 줄바꿈
nowrap	공백 여러개가 있어도 1개만 적용	줄바꿈 없음
pre	공백 있는 그대로 표시	줄바꿈 없음
pre-wrap	공백 있는 그대로 표시	자동 줄바꿈
pre-line	공백 여러개가 있어도 1개만 적용	자동 줄바꿈
break-spaces	공백 있는 그대로 표시	자동 줄바꿈

 

pre / pre-wrap / pre-line 속성을 각각 비교해 보기로 했습니다.

- 같은 문단을 어떻게 표현하는지 비교

- br 태그를 같은 곳에 넣어주고 적용 여부 확인 

 

html 

<div class="normal">
<b>white-space : normal</b>

But ere she from the church-door stepped
      She smiled and told us why: 'It was a wicked woman's curse,
'Quoth she, 'and what care I?'<br>  She smiled, and smiled,
and passed it off Ere from the door she stept—
</div>


<div class="pre">
<b>white-space : pre</b>

But ere she from the church-door stepped
      She smiled and told us why: 'It was a wicked woman's curse,
'Quoth she, 'and what care I?'<br>  She smiled, and smiled,
and passed it off Ere from the door she stept—
</div>

<div class="pre-wrap">
<b>white-space : pre-wrap</b>

But ere she from the church-door stepped
      She smiled and told us why: 'It was a wicked woman's curse,
'Quoth she, 'and what care I?'<br>  She smiled, and smiled,
and passed it off Ere from the door she stept—
</div>

<div class="pre-line">
<b>white-space :pre-line</b>

But ere she from the church-door stepped
      She smiled and told us why: 'It was a wicked woman's curse,
'Quoth she, 'and what care I?'<br>  She smiled, and smiled,
and passed it off Ere from the door she stept—
</div>

 

css

div{
  padding: 10px;
  border-top: 2px solid #666;
  margin-top: 20px;
  width: 50%;
  border: 1px solid #ddd;
}
.normal{
  white-space: normal;
}
.pre{
  white-space: pre;
}
.pre-wrap{
  white-space: pre-wrap;
}
.pre-line{
  white-space: pre-line;
}

 

result 

 

 

br 태그는 모두 적용이 되고, 

pre, pre-wrap 만이 공백이 모두 살아 있는 것이 확인 되어 집니다! 

 

활용 방법에 따라 여러가지로 유용하게 쓰이는 속성입니다. 

 

 

 

 

출처 : 

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space