[HTML/CSS] 공백과 줄바꿈 지정(white-space)

공백과 줄바꿈 지정(white-space)

• normal: 여러 개의 공백이나 개행 문자를 하나로 합칩니다. (기본 값)
• nowrap: 공백이나 개행 문자를 무시합니다.
• pre: 원본 텍스트 그대로 표시합니다.
• pre-wrap: 원본 텍스트 그대로 표시하지만, 줄 바꿈을 인식합니다.
• pre-line: 줄 바꿈 문자를 기준으로 줄을 나눕니다.

normal(가로의 오른쪽 끝에 닿으면 자동으로 줄 바꿈 합니다.)

HTML

<div class="normal">
  동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한사람, 대한으로 길이 보전하세
</div>

CSS

.normal{
  white-space:normal;
  width: 200px;
  height: 50px;
}

 

nowrap(줄 바꿈을 하지 않고 박스 벗어나 표시됩니다.)

HTML

<div class="nowrap">
  동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한사람, 대한으로 길이 보전하세
</div>

CSS

.nowrap{
  white-space:nowrap;
  width: 200px;
  height: 50px;
}

 

 

pre(원본 텍스트 그대로 표시합니다.)

HTML

<div class="pre">
  동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한사람, 대한으로 길이 보전하세
</div>

CSS

.pre{
  white-space:pre;
  width: 200px;
  height: 50px;
}

 

pre-wrap(원본 텍스트를 표시하되 줄 바꿈 합니다.)

HTML

<div class="pre-wrap">
  동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한사람, 대한으로 길이 보전하세
</div>

CSS

.pre-wrap{
  white-space:pre-wrap;
  width: 200px;
  height: 50px;
}

 

pre-line(문자를 기준으로 줄을 나눕니다.)

HTML

<div class="pre-line">
  동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한사람, 대한으로 길이 보전하세
</div>

CSS

.pre-line{
  white-space:pre-line;
  width: 200px;
  height: 50px;
}