CSS에서 텍스트 사이의 공백이나 줄바꿈 처리를 제어하려면 white-space 속성을 사용합니다. 이 속성은 요소 안에서 공백 문자와 줄바꿈을 브라우저가 어떻게 처리할지 결정합니다.
white-space 속성의 주요 값
- normal — 기본값으로, 연속된 공백은 하나로 합쳐지고 줄바꿈도 일반 공백처럼 처리됩니다.
- pre — HTML의 <pre> 태그처럼 동작하여, 소스 코드에 있는 공백과 줄바꿈을 그대로 유지합니다.
- nowrap — 공백은 하나로 합쳐지지만, 텍스트가 자동으로 줄바꿈되지 않고 한 줄로 이어집니다.
예제
아래 코드를 실행하면 white-space 속성을 활용해 텍스트의 공백과 줄바꿈을 설정하는 방법을 확인할 수 있습니다.
<html> <head> </head> <body> <p style = "white-space:pre;"> This text has a line break and the white-space pre setting tells the browser to honor it just like the HTML pre tag.</p> </body> </html>
위 예제에서는 white-space 값을 pre로 지정했습니다. 이렇게 하면 브라우저가 소스에 포함된 줄바꿈과 공백을 HTML의 <pre> 태그를 사용한 것처럼 그대로 인식하여 화면에 출력합니다.