CSS white-space(white-space을 처리하는 방법)

html에서 가장 중요한 것은 컨텐츠를 이루는 텍스트이다.

 

텍스트를 작성하다 보면 space, new line , tab을 많이 사용하는데 이것을 브라우저에서 곧이 곧대로 표현해주진 않는다.  space, new line, tab를 모두 white-space라고 가정하겠다.

 

white-space: normal (default)

 css에서는 default로 여러개의 white-space를 하나의 space로 인식한다. 그리고 글자가 들어갈 영역에 맞춰서 개행이 이루어진다. 예를 들면 space+tab+newline을 만나면 브라우저에서는 space 하나로 처리하는 것이다.

 아래 사진과 같이 영역에 맞춰서 개행이 이루어진다. 

normal

 네 번째 줄에서 'ullamco~~' 다음에 띄어쓰기, 탭, 엔터를 쳤지만 띄어쓰기 하나로 처리되었다. 또한 회색 영역을 넘어가지 않고 줄이 자동으로 바뀌는 것을 볼 수 있다.

 

white-space: pre-wrap

normal과는 다르게 white-space를 모두 그대로 반영하는 방식이다. 단, space, tab을 이용하여 줄 바꿈이 적용되었다면 더 이상 space, tab은 반영되지 않는다. 엔터를 쳐보면 알겠지만 모두 반영됨을 알 수 있다. 

pre-wrap

첫 줄에 dolor~~~ 뒤에 space, tab을 하나씩 치면 그대로 반영 됨을 알 수 있다. 이후 tab을 계속 쳐서 'sit'부터 줄 바꿈이 되고 나면 다음 줄 부터는 space,tab이 반영 되지 않는다.

 

white-space: pre-line

space, tab을 몇개 이어서 치더라도 space 하나로 인식한다. 엔터는 치는 것이 모두 반영된다. 

 

정리하면

normal(default), pre-wrap, pre-line : 영역 크기에 맞추어 자동으로 줄 바꿈

pre-wrap, pre-line: 엔터 모두 반영

pre-wrap: space, tab이 줄바꿈 이전 까지 모두 반영

normal, pre-line: space, tab이 space 하나로 인식

 

자동으로 영역에 맞춰서 줄 바꿈이 되어야 하는 상황에서는 normal, pre-wrap, pre-line을 쓰면 되고 white-space 처리 방법에 따라 골라서 사용하면 된다.

 

 

그렇다면 영역을 넘어도 줄 바꿈을 안하려면 어떤 속성을 써야할까?

답은 nowrap과 pre이다.

 

앞서 설명한 normal, pre-wrap을 이해했다면 아주 쉽다.

 

nowrap은 normal에서 영역을 넘어서도 줄 바꿈을 안하는 방식이다. 

pre는 pre-wrap에서 넘어서도 줄 바꿈을 안하는 방식이다.

 

쉽게 생각하면 한 줄에만 문단을 표시하려면 nowrap을 쓰면 되고 기본은 한 줄에 쓰고 필요에 따라서 enter를 치려면 pre를 쓰면 된다.

 

 

*요약

1.영역에 맞춰 줄바꿈 시에는 normal, pre-wrap, pre-line

2.영역에 맞춰 줄바꿈 안할 시에는 nowrap, pre

normal, pre-wrap, pre-line 의 차이는 white-space 처리 방법

nowrap, pre의 차이는 white-space 처리방법