CSS - white-space 란

문자열 안에 escape 문자들을 사용하다보니,

white-space 속성을 함께 사용하게 되었다.

습관적으로 사용하는 것 말고 어떤 속성인지 자세히 알아보고 싶었다.

한번 익히고 나면 평생 내 것이 된다. 그럼 공부하러 가보자

 

---

CSS - white-space 란

 

텍스트에서 한 줄 혹은 한 칸을 띄울 때 공백이 생긴다. 이것을 white space 라고 한다.

// 공식문서에서는 문자 사이의 vertical 혹은 horizontal 공간으로 정의 내리고 있다.
Whitespace refers to characters which are used to provide horizontal or vertical space between other characters. 

 

css 의 white-space 는 이 공백을 어떻게 핸들링할지를 정해주는 속성이다.

영역 안에 텍스트가 들어갈 때 공백처리( 스페이스와 탭, 줄바꿈, 자동줄바꿈 ) 를 어떻게 할지 결정해준다.

(한줄 띄기를 할때, /n 같은 개행문자를 사용한다던지, <br/> 같은 태그를 사용한다. )

 

 

escape sequence 란 (개행문자)

맨 앞에 역슬래시(\) 가  붙어 특정 역할을 하는 문자이다. 문자열 안에서 중간중간 필요한 곳에 사용된다.

\" – double quote
\\ – single backslash
\a – bell/alert
\b – backspace
\r – carriage return
\n – newline
\s – space
\t – tab

 

white-space 속성

 

1. normal 

텍스트가 박스(영역) 안에 포함된다.

텍스트 앞뒤 연속인 공백 유지 x

글이 길어지면 텍스트가 자동 줄바꿈 된다. 하지만 개행문자나 <br> 은 사용할 수 없다.

white-space: normal;

 

 

2. nowrap 

텍스트가 박스(영역)를 넘어간다. 

텍스트 앞뒤 연속인 공백 유지 x

줄 바꿈은 자동으로 되지 않고, <br> 요소에서만 일어난다. (개행문자x)

white-space: nowrap;

 

3. pre 

텍스트가 박스(영역)를 넘어간다.

텍스트 앞뒤 연속인 공백 유지 o (코드 그대로 표시)

줄 바꿈은 자동으로 되지 않고, 개행문자나 <br> 요소에서만 일어난다.

white-space: pre;

 

 

4. pre-wrap 

텍스트가 박스(영역) 안에 포함된다.

텍스트 앞뒤 연속인 공백 유지 o (코드그대로 표시)

글이 길어지면 텍스트가 자동 줄바꿈 된다. 개행문자나 <br> 요소도 사용할 수 있다.

white-space: pre-wrap;

 

5. pre-line 

텍스트가 박스(영역) 안에 포함된다.

텍스트 앞뒤 연속인 공백 유지 x 

글이 길어지면 텍스트가 자동 줄바꿈 된다. 개행문자나 <br> 요소도 사용할 수 있다.

white-space: pre-line;

 

 

 

 

 

ref:

https://jiho-1010.tistory.com/22

https://developer.mozilla.org/ko/docs/Web/CSS/white-space