[CSS] white-space 알아보기

white-space는 요소 내의 공백문자를 처리하는 방법을 정해주는 속성입니다.

 

| 속성 값

1. normal

이 값은 기본값으로 연속된 공백이 있으면 하나로 합치고

한 줄이 너무 길면 자동으로 줄 바꿈을 해줍니다.

 

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius labore culpa, harum similique inventore placeat fuga, ipsa tempora.

 

2. nowrap

이 값은 연속된 공백이 있으면 하나로 합치고

줄 바꿈을 방지해서 한 줄에 모든 내용이 표시됩니다.

 

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius labore culpa, harum similique inventore placeat fuga, ipsa tempora.

 

→ <br> 태그로 줄 바꿈 가능

 

3. pre

이 값은 요소 내의 모든 공백문자와 줄 바꿈을 유지해 줍니다.

따라서 html코드에 나타나는 대로 표시해 줍니다.

<div style="border: 1px solid; width: 200px;">
  <p style="white-space: pre;">
    Lorem ipsum dolor
    
        sit amet consec
    tetur 
    adipisicing elit. Eius
        culpa, harum
  </p>
</div>

Lorem ipsum dolor sit amet consec tetur adipisicing elit. Eius culpa, harum

→ <br> 태그로 줄 바꿈 가능

 

4. pre-wrap

이 값은 연속공백과 줄 바꿈은 유지해 주고

한 줄이 너무 길면 자동으로 줄 바꿈을 해줍니다.

 

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius labore culpa, .

→ <br> 태그로 줄 바꿈 가능

 

5. pre-line

이 값은 연속된 공백이 있으면 하나로 합치고

줄 바꿈은 유지해 주고

한 줄이 너무 길면 자동으로 줄 바꿈을 해줍니다.

 

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius labore culpa, harum similique invento re placeat fuga, ips a tempora.

→ <br> 태그로 줄 바꿈 가능