[CSS] 요소안의 공백 처리 white-space

white-space

white space란??

여백이라고도 하는데 html에서는 공백, 공란으로 생각 하면 된다.

normal : 기본값, 공백을 여러개 넣어도 공백 1개만 표시, 글이 길어지면 텍스트가 자동 줄바꿈 됨(wrap)

nowrap : 공백을 여러개 넣어도 1개만 표시, 텍스트가 길어도 줄바꿈 되지 않고 같은 줄에 계속 표시

pre : 공백을 코드에 있는 그대로 표시함. <pre>태그처럼 행동함. 코드에 줄바꿈이 없다면 줄바꿈이 되지 않음

pre-wrap : 공백을 코드에 있는 그대로 표시함. 코드에 줄바꿈이 없어도 자동 줄바꿈이 됨.

pre-line  : 공백을 여러개 넣어도 1개만 표시. 코드에 줄바꿈이 없어도 자동 줄바꿈이 되며, 코드에 줄바꿈이 있을 때도 그대로 표시

속성	새로운 줄	공백과 들여쓰기	줄바꿈
nomal	공백 1개만 표시	공백 1개만 표시	자동 줄 바꿈
norwrap	공백 1개만 표시	공백 1개만 표시	줄바꿈 없음
pre	공백을 있는 그대로 출력	공백을 있는 그대로 출력	줄바꿈 없음
pre-wrap	공백을 있는 그대로 출력	공백을 있는 그대로 출력	자동 줄 바꿈
pre-line	공백을 있는 그대로 출력	공백 1개만 표시	자동 줄 바꿈