white-space

설명

🔖 공백 문자 제거

속성값

 

속성값	설명
normal	연속된 띄어쓰기, 들여쓰기 그리고 줄바꿈 문자가 모두 무시
nowrap	자동 줄바꿈이 일어나지 않음
pre	연속된 띄어쓰기와 들여쓰기, 줄바꿈이 있는 그대로 유지
pre-wrap	==pre , 텍스트 안에 긴 행이 있을 때 해당 행에서 자동 줄바꿈
pre-line	줄바꿈 문자만 있는 그대로 처리해주고 연속된 띄어쓰기와 들여쓰기는 무시하고 모두 띄어쓰기 한 번으로 처리
break-spaces	잘 안쓰이는 값

normal (default)

• 연속된 띄어쓰기, 들여쓰기 그리고 줄바꿈 문자가 모두 무시
• 부모 요소의 가로폭을 넘어갈 때는 자동으로 줄바꿈
• 두 칸이상 연속으로 띄어쓰기를 하거나 들여쓰기를 하는 것도 불가능
• ( 와 같은 HTML 엔티티(entity)를 사용하여 2칸 이상 띄어쓰기 가능)

nowrap

• 설정값은 normal과 동일
• 자동 줄바꿈이 일어나지 않음
• overflow, text-overflow와 같이 사용하여 부모 요소 밖으로 빠져나오는 텍스트를 숨김
  • 말줄임 기호(…)로 표시

    div {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    ​

    

  
  
  • 가로 스크롤바

    div {
      white-space: nowrap;
      overflow: auto;
    }
    ​

    

 

 

 

pre

• 연속된 띄어쓰기와 들여쓰기, 줄바꿈이 있는 그대로 유지
• 들여쓰기와 줄바꿈이 들어있는 소스 코드의 일부를 있는 그대로 보여주고 싶을 때 유용 

  

 

pre-wrap

• pre 속성값과 동일하게 연속된 띄어쓰기와 들여쓰기, 줄바꿈을 있는 그대로 보존
• 텍스트 안에 긴 행이 있을 때 해당 행에서 자동 줄바꿈
• 좌우 방향으로 스크롤바가 없어도 텍스트를 짤리않게 보여줄 수 있음

  

 

pre-line

• 줄바꿈 문자만 있는 그대로 처리해주고 연속된 띄어쓰기와 들여쓰기는 무시하고 모두 띄어쓰기 한 번으로 처리
• pre-wrap 속성값처럼 텍스트 안에 긴 행이 있을 때 해당 행이 부모 요소 밖으로 빠져나오지 않음

  

 

break-spaces

• 잘 안 쓰임

<div>
    div:nth-of-type(1) {
        white-space: normal;
    }
</div>

<div>
    div:nth-of-type(2) {
        white-space: nowrap;
    }
</div>

<div>
    div:nth-of-type(3) {
        white-space: pre;
    }
</div>

<div>
    div:nth-of-type(4) {
        white-space: pre-wrap;
    }
</div>

<div>
    div:nth-of-type(5) {
        white-space: pre-line;
    }
</div>

<div>
    div:nth-of-type(6) {
        white-space: break-spaces;
    }
</div>
<style>
div:nth-of-type(1) {
  white-space: normal;
}

div:nth-of-type(2) {
  white-space: nowrap;
}

div:nth-of-type(3) {
  white-space: pre;
}

div:nth-of-type(4) {
  white-space: pre-wrap;
}

div:nth-of-type(5) {
  white-space: pre-line;
}

div:nth-of-type(6) {
  white-space: break-spaces;
}
</style>

설명

<aside> 🔖 공백 문자 제거

</aside>

속성값

속성값 설명

normal	연속된 띄어쓰기, 들여쓰기 그리고 줄바꿈 문자가 모두 무시
nowrap	자동 줄바꿈이 일어나지 않음
pre	연속된 띄어쓰기와 들여쓰기, 줄바꿈이 있는 그대로 유지
pre-wrap	==pre , 텍스트 안에 긴 행이 있을 때 해당 행에서 자동 줄바꿈
pre-line	줄바꿈 문자만 있는 그대로 처리해주고 연속된 띄어쓰기와 들여쓰기는 무시하고 모두 띄어쓰기 한 번으로 처리
break-spaces	잘 안쓰이는 값

normal (default)

• 연속된 띄어쓰기, 들여쓰기 그리고 줄바꿈 문자가 모두 무시
• 부모 요소의 가로폭을 넘어갈 때는 자동으로 줄바꿈
• 두 칸이상 연속으로 띄어쓰기를 하거나 들여쓰기를 하는 것도 불가능
• (&nbsp;와 같은 HTML 엔티티(entity)를 사용하여 2칸 이상 띄어쓰기 가능)

nowrap

• 설정값은 normal과 동일
• 자동 줄바꿈이 일어나지 않음
• overflow, text-overflow와 같이 사용하여 부모 요소 밖으로 빠져나오는 텍스트를 숨김
  • 말줄임 기호(…)로 표시
  • div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  • 가로 스크롤바
  • div { white-space: nowrap; overflow: auto; }

pre

• 연속된 띄어쓰기와 들여쓰기, 줄바꿈이 있는 그대로 유지
• 들여쓰기와 줄바꿈이 들어있는 소스 코드의 일부를 있는 그대로 보여주고 싶을 때 유용

pre-wrap

• pre 속성값과 동일하게 연속된 띄어쓰기와 들여쓰기, 줄바꿈을 있는 그대로 보존
• 텍스트 안에 긴 행이 있을 때 해당 행에서 자동 줄바꿈
• 좌우 방향으로 스크롤바가 없어도 텍스트를 짤리않게 보여줄 수 있음

pre-line

• 줄바꿈 문자만 있는 그대로 처리해주고 연속된 띄어쓰기와 들여쓰기는 무시하고 모두 띄어쓰기 한 번으로 처리
• pre-wrap 속성값처럼 텍스트 안에 긴 행이 있을 때 해당 행이 부모 요소 밖으로 빠져나오지 않음

break-spaces

• 잘 안 쓰임

<div>
    div:nth-of-type(1) {
        white-space: normal;
    }
</div>

<div>
    div:nth-of-type(2) {
        white-space: nowrap;
    }
</div>

<div>
    div:nth-of-type(3) {
        white-space: pre;
    }
</div>

<div>
    div:nth-of-type(4) {
        white-space: pre-wrap;
    }
</div>

<div>
    div:nth-of-type(5) {
        white-space: pre-line;
    }
</div>

<div>
    div:nth-of-type(6) {
        white-space: break-spaces;
    }
</div>
<style>
div:nth-of-type(1) {
  white-space: normal;
}

div:nth-of-type(2) {
  white-space: nowrap;
}

div:nth-of-type(3) {
  white-space: pre;
}

div:nth-of-type(4) {
  white-space: pre-wrap;
}

div:nth-of-type(5) {
  white-space: pre-line;
}

div:nth-of-type(6) {
  white-space: break-spaces;
}
</style>

설명

<aside> 🔖 공백 문자 제거

</aside>

속성값

속성값 설명

normal	연속된 띄어쓰기, 들여쓰기 그리고 줄바꿈 문자가 모두 무시
nowrap	자동 줄바꿈이 일어나지 않음
pre	연속된 띄어쓰기와 들여쓰기, 줄바꿈이 있는 그대로 유지
pre-wrap	==pre , 텍스트 안에 긴 행이 있을 때 해당 행에서 자동 줄바꿈
pre-line	줄바꿈 문자만 있는 그대로 처리해주고 연속된 띄어쓰기와 들여쓰기는 무시하고 모두 띄어쓰기 한 번으로 처리
break-spaces	잘 안쓰이는 값

normal (default)

• 연속된 띄어쓰기, 들여쓰기 그리고 줄바꿈 문자가 모두 무시
• 부모 요소의 가로폭을 넘어갈 때는 자동으로 줄바꿈
• 두 칸이상 연속으로 띄어쓰기를 하거나 들여쓰기를 하는 것도 불가능
• (&nbsp;와 같은 HTML 엔티티(entity)를 사용하여 2칸 이상 띄어쓰기 가능)

nowrap

• 설정값은 normal과 동일
• 자동 줄바꿈이 일어나지 않음
• overflow, text-overflow와 같이 사용하여 부모 요소 밖으로 빠져나오는 텍스트를 숨김
  • 말줄임 기호(…)로 표시
  • div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  • 가로 스크롤바
  • div { white-space: nowrap; overflow: auto; }

pre

• 연속된 띄어쓰기와 들여쓰기, 줄바꿈이 있는 그대로 유지
• 들여쓰기와 줄바꿈이 들어있는 소스 코드의 일부를 있는 그대로 보여주고 싶을 때 유용

pre-wrap

• pre 속성값과 동일하게 연속된 띄어쓰기와 들여쓰기, 줄바꿈을 있는 그대로 보존
• 텍스트 안에 긴 행이 있을 때 해당 행에서 자동 줄바꿈
• 좌우 방향으로 스크롤바가 없어도 텍스트를 짤리않게 보여줄 수 있음

pre-line

• 줄바꿈 문자만 있는 그대로 처리해주고 연속된 띄어쓰기와 들여쓰기는 무시하고 모두 띄어쓰기 한 번으로 처리
• pre-wrap 속성값처럼 텍스트 안에 긴 행이 있을 때 해당 행이 부모 요소 밖으로 빠져나오지 않음

break-spaces

• 잘 안 쓰임

<div>
    div:nth-of-type(1) {
        white-space: normal;
    }
</div>

<div>
    div:nth-of-type(2) {
        white-space: nowrap;
    }
</div>

<div>
    div:nth-of-type(3) {
        white-space: pre;
    }
</div>

<div>
    div:nth-of-type(4) {
        white-space: pre-wrap;
    }
</div>

<div>
    div:nth-of-type(5) {
        white-space: pre-line;
    }
</div>

<div>
    div:nth-of-type(6) {
        white-space: break-spaces;
    }
</div>
<style>
div:nth-of-type(1) {
  white-space: normal;
}

div:nth-of-type(2) {
  white-space: nowrap;
}

div:nth-of-type(3) {
  white-space: pre;
}

div:nth-of-type(4) {
  white-space: pre-wrap;
}

div:nth-of-type(5) {
  white-space: pre-line;
}

div:nth-of-type(6) {
  white-space: break-spaces;
}
</style>

설명

<aside> 🔖 공백 문자 제거

</aside>

속성값

속성값 설명

normal	연속된 띄어쓰기, 들여쓰기 그리고 줄바꿈 문자가 모두 무시
nowrap	자동 줄바꿈이 일어나지 않음
pre	연속된 띄어쓰기와 들여쓰기, 줄바꿈이 있는 그대로 유지
pre-wrap	==pre , 텍스트 안에 긴 행이 있을 때 해당 행에서 자동 줄바꿈
pre-line	줄바꿈 문자만 있는 그대로 처리해주고 연속된 띄어쓰기와 들여쓰기는 무시하고 모두 띄어쓰기 한 번으로 처리
break-spaces	잘 안쓰이는 값

normal (default)

• 연속된 띄어쓰기, 들여쓰기 그리고 줄바꿈 문자가 모두 무시
• 부모 요소의 가로폭을 넘어갈 때는 자동으로 줄바꿈
• 두 칸이상 연속으로 띄어쓰기를 하거나 들여쓰기를 하는 것도 불가능
• (&nbsp;와 같은 HTML 엔티티(entity)를 사용하여 2칸 이상 띄어쓰기 가능)

nowrap

• 설정값은 normal과 동일
• 자동 줄바꿈이 일어나지 않음
• overflow, text-overflow와 같이 사용하여 부모 요소 밖으로 빠져나오는 텍스트를 숨김
  • 말줄임 기호(…)로 표시
  • div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  • 가로 스크롤바
  • div { white-space: nowrap; overflow: auto; }

pre

• 연속된 띄어쓰기와 들여쓰기, 줄바꿈이 있는 그대로 유지
• 들여쓰기와 줄바꿈이 들어있는 소스 코드의 일부를 있는 그대로 보여주고 싶을 때 유용

pre-wrap

• pre 속성값과 동일하게 연속된 띄어쓰기와 들여쓰기, 줄바꿈을 있는 그대로 보존
• 텍스트 안에 긴 행이 있을 때 해당 행에서 자동 줄바꿈
• 좌우 방향으로 스크롤바가 없어도 텍스트를 짤리않게 보여줄 수 있음

pre-line

• 줄바꿈 문자만 있는 그대로 처리해주고 연속된 띄어쓰기와 들여쓰기는 무시하고 모두 띄어쓰기 한 번으로 처리
• pre-wrap 속성값처럼 텍스트 안에 긴 행이 있을 때 해당 행이 부모 요소 밖으로 빠져나오지 않음

break-spaces

• 잘 안 쓰임

<div>
    div:nth-of-type(1) {
        white-space: normal;
    }
</div>

<div>
    div:nth-of-type(2) {
        white-space: nowrap;
    }
</div>

<div>
    div:nth-of-type(3) {
        white-space: pre;
    }
</div>

<div>
    div:nth-of-type(4) {
        white-space: pre-wrap;
    }
</div>

<div>
    div:nth-of-type(5) {
        white-space: pre-line;
    }
</div>

<div>
    div:nth-of-type(6) {
        white-space: break-spaces;
    }
</div>
<style>
div:nth-of-type(1) {
  white-space: normal;
}

div:nth-of-type(2) {
  white-space: nowrap;
}

div:nth-of-type(3) {
  white-space: pre;
}

div:nth-of-type(4) {
  white-space: pre-wrap;
}

div:nth-of-type(5) {
  white-space: pre-line;
}

div:nth-of-type(6) {
  white-space: break-spaces;
}
</style>

설명

<aside> 🔖 공백 문자 제거

</aside>

속성값

속성값 설명

normal	연속된 띄어쓰기, 들여쓰기 그리고 줄바꿈 문자가 모두 무시
nowrap	자동 줄바꿈이 일어나지 않음
pre	연속된 띄어쓰기와 들여쓰기, 줄바꿈이 있는 그대로 유지
pre-wrap	==pre , 텍스트 안에 긴 행이 있을 때 해당 행에서 자동 줄바꿈
pre-line	줄바꿈 문자만 있는 그대로 처리해주고 연속된 띄어쓰기와 들여쓰기는 무시하고 모두 띄어쓰기 한 번으로 처리
break-spaces	잘 안쓰이는 값

normal (default)

• 연속된 띄어쓰기, 들여쓰기 그리고 줄바꿈 문자가 모두 무시
• 부모 요소의 가로폭을 넘어갈 때는 자동으로 줄바꿈
• 두 칸이상 연속으로 띄어쓰기를 하거나 들여쓰기를 하는 것도 불가능
• (&nbsp;와 같은 HTML 엔티티(entity)를 사용하여 2칸 이상 띄어쓰기 가능)

nowrap

• 설정값은 normal과 동일
• 자동 줄바꿈이 일어나지 않음
• overflow, text-overflow와 같이 사용하여 부모 요소 밖으로 빠져나오는 텍스트를 숨김
  • 말줄임 기호(…)로 표시
  • div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  • 가로 스크롤바
  • div { white-space: nowrap; overflow: auto; }

pre

• 연속된 띄어쓰기와 들여쓰기, 줄바꿈이 있는 그대로 유지
• 들여쓰기와 줄바꿈이 들어있는 소스 코드의 일부를 있는 그대로 보여주고 싶을 때 유용

pre-wrap

• pre 속성값과 동일하게 연속된 띄어쓰기와 들여쓰기, 줄바꿈을 있는 그대로 보존
• 텍스트 안에 긴 행이 있을 때 해당 행에서 자동 줄바꿈
• 좌우 방향으로 스크롤바가 없어도 텍스트를 짤리않게 보여줄 수 있음

pre-line

• 줄바꿈 문자만 있는 그대로 처리해주고 연속된 띄어쓰기와 들여쓰기는 무시하고 모두 띄어쓰기 한 번으로 처리
• pre-wrap 속성값처럼 텍스트 안에 긴 행이 있을 때 해당 행이 부모 요소 밖으로 빠져나오지 않음

break-spaces

• 잘 안 쓰임

<div>
    div:nth-of-type(1) {
        white-space: normal;
    }
</div>

<div>
    div:nth-of-type(2) {
        white-space: nowrap;
    }
</div>

<div>
    div:nth-of-type(3) {
        white-space: pre;
    }
</div>

<div>
    div:nth-of-type(4) {
        white-space: pre-wrap;
    }
</div>

<div>
    div:nth-of-type(5) {
        white-space: pre-line;
    }
</div>

<div>
    div:nth-of-type(6) {
        white-space: break-spaces;
    }
</div>
<style>
div:nth-of-type(1) {
  white-space: normal;
}

div:nth-of-type(2) {
  white-space: nowrap;
}

div:nth-of-type(3) {
  white-space: pre;
}

div:nth-of-type(4) {
  white-space: pre-wrap;
}

div:nth-of-type(5) {
  white-space: pre-line;
}

div:nth-of-type(6) {
  white-space: break-spaces;
}
</style>

설명

<aside> 🔖 공백 문자 제거

</aside>

속성값

속성값 설명

normal	연속된 띄어쓰기, 들여쓰기 그리고 줄바꿈 문자가 모두 무시
nowrap	자동 줄바꿈이 일어나지 않음
pre	연속된 띄어쓰기와 들여쓰기, 줄바꿈이 있는 그대로 유지
pre-wrap	==pre , 텍스트 안에 긴 행이 있을 때 해당 행에서 자동 줄바꿈
pre-line	줄바꿈 문자만 있는 그대로 처리해주고 연속된 띄어쓰기와 들여쓰기는 무시하고 모두 띄어쓰기 한 번으로 처리
break-spaces	잘 안쓰이는 값

normal (default)

• 연속된 띄어쓰기, 들여쓰기 그리고 줄바꿈 문자가 모두 무시
• 부모 요소의 가로폭을 넘어갈 때는 자동으로 줄바꿈
• 두 칸이상 연속으로 띄어쓰기를 하거나 들여쓰기를 하는 것도 불가능
• (&nbsp;와 같은 HTML 엔티티(entity)를 사용하여 2칸 이상 띄어쓰기 가능)

nowrap

• 설정값은 normal과 동일
• 자동 줄바꿈이 일어나지 않음
• overflow, text-overflow와 같이 사용하여 부모 요소 밖으로 빠져나오는 텍스트를 숨김
  • 말줄임 기호(…)로 표시
  • div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  • 가로 스크롤바
  • div { white-space: nowrap; overflow: auto; }

pre

• 연속된 띄어쓰기와 들여쓰기, 줄바꿈이 있는 그대로 유지
• 들여쓰기와 줄바꿈이 들어있는 소스 코드의 일부를 있는 그대로 보여주고 싶을 때 유용

pre-wrap

• pre 속성값과 동일하게 연속된 띄어쓰기와 들여쓰기, 줄바꿈을 있는 그대로 보존
• 텍스트 안에 긴 행이 있을 때 해당 행에서 자동 줄바꿈
• 좌우 방향으로 스크롤바가 없어도 텍스트를 짤리않게 보여줄 수 있음

pre-line

• 줄바꿈 문자만 있는 그대로 처리해주고 연속된 띄어쓰기와 들여쓰기는 무시하고 모두 띄어쓰기 한 번으로 처리
• pre-wrap 속성값처럼 텍스트 안에 긴 행이 있을 때 해당 행이 부모 요소 밖으로 빠져나오지 않음

break-spaces

• 잘 안 쓰임

<div>
    div:nth-of-type(1) {
        white-space: normal;
    }
</div>

<div>
    div:nth-of-type(2) {
        white-space: nowrap;
    }
</div>

<div>
    div:nth-of-type(3) {
        white-space: pre;
    }
</div>

<div>
    div:nth-of-type(4) {
        white-space: pre-wrap;
    }
</div>

<div>
    div:nth-of-type(5) {
        white-space: pre-line;
    }
</div>

<div>
    div:nth-of-type(6) {
        white-space: break-spaces;
    }
</div>
<style>
div:nth-of-type(1) {
  white-space: normal;
}

div:nth-of-type(2) {
  white-space: nowrap;
}

div:nth-of-type(3) {
  white-space: pre;
}

div:nth-of-type(4) {
  white-space: pre-wrap;
}

div:nth-of-type(5) {
  white-space: pre-line;
}

div:nth-of-type(6) {
  white-space: break-spaces;
}
</style>