[CSS] 맨날 까먹는 white-space 정리

가끔 쓰여 쓸때마다 까먹는 white-space의 속성들

오늘 깔끔하게 정리해 보자. 

 

참고: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

white-space - CSS: Cascading Style Sheets | MDN

 

white-space 속성

white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;

 

 

normal (default)

- 띄어쓰기는 합침 (하나로)

- 개행도 띄어쓰기로 간주

- 폭(width)에 따라서 개행됨

See the Pen Untitled by 조민수 (@crkmehhk-the-styleful) on CodePen.

 

nowrap

- 띄어쓰기 합침, 개행도 띄어쓰기로 간주

- 폭에 영향을 받지 않음 (normal과의 차이점)

See the Pen Untitled by 조민수 (@crkmehhk-the-styleful) on CodePen.

 

pre

- 개행, <br> 태그 다 먹음

- 띄어쓰기도 다 먹음

- 폭에 영향을 받지 않음

See the Pen Untitled by 조민수 (@crkmehhk-the-styleful) on CodePen.

 

pre-wrap

- 개행, <br> 태그 다 먹음

- 띄어쓰기도 다 먹음

- 폭에 영향을 받음 (pre와의 차이점)

See the Pen Untitled by 조민수 (@crkmehhk-the-styleful) on CodePen.

 

pre-line

- 개행, <br> 태그 다 먹음

- 띄어쓰기는 축소됨 (normal 과 nowrap처럼)

- 폭에 영향을 받음 

See the Pen Untitled by 조민수 (@crkmehhk-the-styleful) on CodePen.

 

break-spaces

- pre-wrap과 동일

- 라인 끝의 공백, 개행 뒤 공백도 다 먹음 (pre-wrap과의 차이점)

See the Pen [css] white-space: break-spaces by 조민수 (@crkmehhk-the-styleful) on CodePen.

 

네모난 div 상자 박스 안에 글자를 넣을때 속성에 맞는 글자를 넣고 

보통 text-overflow와 overflow를 같이 써서 글자 뒤에 ...을 만든다거나 

글자를 잘라서 화면을 맞출때 유용하게 사용 된다. 

 

ex) 

See the Pen Untitled by 조민수 (@crkmehhk-the-styleful) on CodePen.

 

끝.