[ CSS ] white-space 속성

 

/* Single keyword values */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;

/* white-space-collapse and text-wrap shorthand values */
white-space: collapse balance;
white-space: preserve nowrap;

/* Global values */
white-space: inherit;
white-space: initial;
white-space: revert;
white-space: revert-layer;
white-space: unset;

 

 

 

 

 

white-space는 CSS에서 텍스트의 공백(스페이스, 탭, 줄바꿈 등) 처리 방법을 지정하는 속성이다.

 

속성 값

normal: 기본값으로, 연속된 공백을 하나로 처리하고, 줄 바꿈을 필요에 따라 처리한다.

nowrap: 줄 바꿈 없이 모든 텍스트를 한 줄에 나타낸다.

pre: 텍스트가 그대로 표시되며, HTML 코드에 있는 줄 바꿈도 그대로 반영된다. 스페이스나 탭도 그대로 보여진다.

pre-wrap: HTML 코드에 있는 줄 바꿈은 그대로 반영되지만, 연속된 공백은 하나로 처리된다.

pre-line: 연속된 공백은 하나로 처리되고, HTML 코드의 줄 바꿈은 반영된다.

break-spaces: 연속된 공백은 하나로 처리되고, 줄 바꿈은 무시된다. 하지만 단어 내에서의 스페이스와 줄 바꿈은 반영된다.

 

 

 

 

---

 

 

텍스트 줄 바꿈 제어: 텍스트를 한 줄에 나타내기 원할 때 `white-space: nowrap`을 사용하여 줄 바꿈을 방지할 수 있다. 긴 문장이나 URL 주소 등을 줄 바꿈 없이 한 줄에 표시할 때 유용하다.

코드 블록 표시: 프로그래밍 코드 블록이나 예제 코드를 그대로 표시하고자 할 때 `white-space: pre` 또는 `white-space: pre-wrap`을 사용하여 HTML 코드에 있는 줄 바꿈과 공백을 그대로 보여줄 수 있다.

텍스트 간격 제어: `white-space` 속성은 연속 공백 처리를 조정하는 데에도 사용된다. `white-space: normal`을 사용하면 연속된 공백이 하나로 합쳐져서, 공백 간격을 조절할 수 있다.

텍스트 줄 간격 제어: `white-space: pre-line`은 HTML 코드의 줄 바꿈은 그대로 유지하면서 연속 공백은 하나로 합쳐져 줄 간격을 제어한다.

글자 단위 줄 바꿈 방지: 텍스트의 줄 바꿈을 특정 지점에서 금지하고자 할 때 `white-space: break-spaces`를 사용하여 스페이스와 줄 바꿈을 그대로 유지하면서 단어 단위로 줄 바꿈을 가능하게 한다. (이 속성은 브라우저 스펙을 확인 후 사용해야 한다.)

이외에도 `white-space` 속성은 텍스트의 레이아웃을 세밀하게 제어하기 위해 다양한 방식으로 활용될 수 있다. 각 상황에 따라 적절한 `white-space` 값을 선택하여 텍스트를 원하는 방식으로 표시할 수 있다.

 

 

 

 

 

---

 

🌸 출처 🌸

 

white-space - MDN