[CSS3] white-space

---

알고있으면 좋은 CSS3 Tip✨

---

white-space란 무엇인가?

• 텍스트와 관련된 공백 처리 방식을 지정하는 속성이다.
• :has는 특정 요소를 가진 태그를 선택한다.

 

(1) normal (기본값)

• 공백은 하나로 합쳐지고, 줄 바꿈은 텍스트가 넘칠 때만 발생한다.
• 일반적인 텍스트 흐름을 유지한다.

 

(2) nowrap

• 텍스트가 자동으로 줄 바꿈을 하지 않고, 한 줄에 계속 표시된다.
• 텍스트가 부모 요소의 너비를 넘으면 오버플로우가 발생한다. (긴 텍스트가 부모 요소를 넘어서서 보이지 않는다.

 

(3) pre-wrap

• pre처럼 공백과 줄 바꿈을 유지하되, 요소의 너비를 넘어가지 않도록 자동으로 줄 바꿈한다. (텍스트가 넘칠 경우 자동으로 줄 바꿈이 일어나면서 공백도 그대로 유지)

 

(4) pre-line

• 공백은 하나로 합쳐지지만, 줄 바꿈은 텍스트의 넘침에 따라 발생한다.
• 즉, 공백은 무시되고, 줄 바꿈만 유지된다.