[CSS 속성] white-space

Intro

 

공백 문자

HTML에서 연속된 공백은 표현되지 않음

따라서 white-space 속성으로 공백, 줄바꿈 등을 표시

 

 

 

white-space : normal

• default 속성으로 연속된 띄어쓰기, 들여쓰기, 줄바꿈 문자 모두 무시됨

 

white-space : nowrap

• 텍스트가 길어서 박스안에 가로 길이를 넘어가더라도 줄바꿈이 일어나게 하고 싶지 않은 경우
• 연속된 띄어쓰기, 들여쓰기, 줄바꿈 문자 모두 무시됨

 

white-space : pre

• 연속된 띄어쓰기, 들여쓰기, 줄바꿈 문자가 그대로 표현됨
• 소스 코드를 그대로 노출 시키고 싶을 경우 사용됨

 

white-space : pre-wrap

• 연속된 띄어쓰기, 들여쓰기, 줄바꿈 문자가 그대로 표현됨
• pre 속성과 다른점은 자동으로 줄바꿈이됨

See the Pen Untitled by jominh (@thatBamm) on CodePen.