공백 문자
바로 띄어쓰기(\s), 들여쓰기(\t), 줄바꿈(\n)이 대표적으로 공백을 나타내는 문자이다. 하지만 이러한 문자들을 아무리 연속해서 많이 사용하더라도 웹에서는 그냥 하나의 띄어쓰기로 처리가 되는 경우가 많다. 게다가 이러한 공백 문자가 HTML 요소 내에서 맨 앞이나 맨 뒤에 나오면 아예 없는 셈 치기도 한다.
normal
위와 같은 현상이 발생하는 이유는 white-space 속성은 별도로 지정해주지 않으면 기본적으로 normal이 적용이되기 때문인데 white-space 속성이 normal로 설정된 요소 안에서는 연속된 띄어쓰기, 들여쓰기 그리고 줄바꿈 문자가 모두 무시가 된다.
뿐만 아니라 normal 속성값은 텍스트가 너무 길어서 부모 요소의 가로폭을 넘어갈 때는 자동으로 줄바꿈을 해주는데 줄바꿈 문자를 이용해서 원하는 위치에서 수동으로 줄바꿈을 하거나 ( 와 같은 HTML 엔티티(entity)를 쓰는 편법을 동원하지 않는 이상) 두 칸이상 연속으로 띄어쓰기를 하거나 들여쓰기를 하는 것도 불가능하다.
nowrap
텍스트가 길어서 부모 요소 안의 가로폭을 넘어가더라도 자동으로 줄바꿈이 일어나게 하고 싶을 때는 white-space 속성을 nowrap으로 설정해주면 된다.
자동 줄바꿈이 일어나지 않는다는 부분을 제외하고는 nowrap 설정값은 기본 설정값인 normal과 동일하게 작동하는데 연속된 띄어쓰기, 들여쓰기 그리고 줄바꿈 문자를 모두 무시하고 띄어쓰기 한 번으로 처리한다.
대부분 경우에는 overflow 속성을 hidden으로 설정하여 부모 요소 밖으로 빠져나오는 텍스트를 숨기는데 사용자가 혼란스럽지 않도록 text-overflow 속성을 사용하여 말줌임 기호인 ...를 보여주는 경우도 많다.
div:nth-of-type(3) {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
또 다른 대안으로 사용자가 가로 스크롤바로 끝까지 텍스트를 볼 수 있도록 해줄 수도 있다.
div:nth-of-type(4) {
white-space: nowrap;
overflow: auto;
}
pre
white-space 속성을 pre로 설정하면 텍스트에 포함된 연속된 띄어쓰기, 들여쓰기, 줄바꿈과 같은 공백 문자들이 HTML 문서 안에 붙여넣은 그대로 나타나게 된다. 보통 웹페이지 상에서 들여쓰기와 줄바꿈이 들어있는 소스 코드의 일부를 있는 그대로 보여주고 싶을 때 유용하며 자바스크립트 코드를 웹에서도 효과적으로 보여줄 수 있다.
단, 텍스트 안에 긴 행이 있다면 nowrap 설정값처럼 해당 행은 부모 요소 밖으로 빠져나올 수 있어 주의가 필요한데 이를 방지하기 위해서 overflow 속성을 auto로 설정하여 좌우 방향으로 스크롤바가 자동으로 나타나게 해주면 좋다.
div:nth-of-type(2) {
white-space: pre;
overflow: auto;
}
pre-wrap
pre-wrap 속성값은 pre 속성값과 동일하게 연속된 띄어쓰기와 들여쓰기, 줄바꿈을 있는 그대로 보존해주는데 차이점은 텍스트 안에 긴 행이 있을 때 해당 행에서 자동으로 줄바꿈이 일어난다는 것이다.
따라서 좌우 방향으로 스크롤바가 없어도 텍스트가 짤리지않게 보여줄 수 있다는 이점이 있다.
pre-line
pre-line 속성값은 말 그대로 라인(line), 즉 줄바꿈 문자만 있는 그대로 처리해주고 연속된 띄어쓰기와 들여쓰기는 무시하고 모두 띄어쓰기 한 번으로 처리한다. 또한 pre-wrap 속성값처럼 텍스트 안에 긴 행이 있을 때 해당 행이 부모 요소 밖으로 빠져나오지 않는다.
다시 말해, pre-line 속성값은 줄바꿈만 그대로 유지하면서 연속된 띄어쓰기와 들여쓰기를 무시하고 싶을 때 쓸 수 있는데 활용 사례가 많지는 않다.
