CSS 속성 white-space

white-space

사전적 의미로 white space는 '여백'을 뜻함.

html에서는 공백의 의미

 

 

태그 작성시 생기는 공백

• 줄바꿈 (line break)
• 들여쓰기 (tab)
• 공백 (space)

html 작성시 공백을 아무리 많이 입력해도 1개만 표현됨.

하나 이상의 공백을 표현하기 위해서는  를 사용해야함.

또는 <pre> 태그를 사용하면 공백이나 줄바꿈을 있는 그대로 표시

 

 

white-space 속성 값

• normal (default)
  공백을 여러개 넣어도 1개만 표시. 글이 길어지면 텍스트가 자동 줄바꿈 됨(wrap)
• nowrap
  공백을 여러개 넣어도 1개만 표시. 글이 길어도 줄바꿈 되지 않고 같은 줄에 계속 표시
• pre
  공백을 코드에 있는 그대로 표시. <pre> 태그처럼 행동함. 코드에 줄바꿈이 없다면 줄바꿈 되지 않음
• pre-wrap
  공백을 코드에 있는 그대로 표시. 코드에 줄바꿈이 없어도 자동 줄바꿈 됨
• pre-line
  공백을 여러개 넣어도 1개만 표시. 코드에 줄바꿈이 없어도 자동 줄바꿈 됨. 코드에 줄바꿈이 있을 때도 그대로 표시

 

	새로운 줄에서	공백과 들여쓰기	줄바꿈
normal	공백 1개만 표시	공백 1개만 표시	자동 줄바꿈
nowrap	공백 1개만 표시	공백 1개만 표시	자동 줄바꿈
pre	공백을 있는 그대로 표시	공백을 있는 그대로 표시	줄바꿈 x
pre-wrap	공백을 있는 그대로 표시	공백을 있는 그대로 표시	줄바꿈 x
pre-line	공백을 있는 그대로 표시	공백 1개만 표시	자동 줄바꿈

 

 

브라우저 지원 정보

https://caniuse.com/?search=white-space