[css] 줄바꿈, 공백, 띄우기 css 처리 (ft. white-space)

[css] 문장 띄우기, 공백, 줄바꿈 보여주기

 

white-space

• white space는 여백이라고 하는데 css의 white-space 속성은 문장의  공백, 공란이라고 생각하면 됩니다. 

	다음 줄(공백이 여러개일경우)	공백, 들여쓰기	자동 줄바꿈(영역안 처리)
normal	공백 1개만 표시	공백 1개만 표시	O
nowrap	공백 1개만 표시	공백 1개만 표시	X
pre	공백 있는 그대로 표시	공백 있는 그대로 표시	X
pre-wrap	공백 있는 그대로 표시	공백 있는 그대로 표시	O
pre-line	공백 있는 그대로 표시	공백 1개만 표시	O

 

 

문장 띄우기, 공백, 줄바꿈 보여주기

• 연속된 공백을 그대로 표시하고, 긴 줄도 줄 바꿈하지 않고 표시
• 메모장 구현시 저장된 데이터를 불러올때, 사용자가 입력한 공백, 띄어쓰기 그대로를 출력해야 하므로, white-space 속성값을 pre로 출력하고, 영역이 넘치는 경우를 따로 처리해줘야 함

{white-space: pre;}

 

글자가 영역 밖을 넘었을 때 자동 줄바꿈

{word-wrap: break-word;}