white-space 속성

웹 개발을 진행하다보면 HTML 문서 내에서 띄어쓰기를 여러 번 하더라도 한번만 띄어쓰기가 되고, 들여쓰기나

줄바꿈이 무시되는 현상을 한번쯤은 경험했을 것이다. 이러한 현상은 CSS 의 white-space 속성을

이용하여 쉽게 변경할 수 있다.

 

white-space 는 공백 문자를 처리하는 CSS 속성이다.

 

예시)

위처럼 <div> 태그에 띄어쓰기와 줄바꿈 등을 넣었다. 하지만 예상과는 다르게 아래와 같다.

white-space 속성 옵션 종류

 

normal

위와 같이 공백을 무시하는 현상이 발생하는 이유는 white-space 속성을 별도로 지정해주지 않으면

normal 값이 적용되어 있다. white-space 속성이 normal 로 설정된 요소 안에서는 연속된 띄어쓰기,

들여쓰기, 줄바꿈 문자가 모두 무시된다. 또한 normal 속성값은 텍스트가 너무 길어

부모 가로폭을 넘어갈 때는 자동으로 줄바꿈을 해준다.

 

 

nowrap

텍스트가 너무 길어 부모 가로폭을 넘어가더라도 자동 줄바꿈을 하고 싶지 않을 때는

white-space 속성의 옵션값을 nowrap 을 설정하면 된다. 자동 줄바꿈을 제외하고는

기본 설정값인 normal 과 동일하게 동작한다.

 

위처럼 부모 가로폭을 넘어가더라도 자동 줄바꿈을 하지 않는다.

보통은 위처럼 내용이 넘어갈때는 overflow 속성을 hidden 하고

내용이 넘어 갔다라는걸 보여주기 위해 말줄임 기호인 ... 을 보여준다.

말줄임 기호는 text-overflow: ellipsis; 를 사용한다.

 

넘어간 내용은 보여지지 않으며 text-overflow 를 통해 "..." 말줄임 기호를 사용했다.

 

 

pre

텍스트에 넣은 그대로 띄어쓰기, 들여쓰기, 줄바꿈같은 공백 문자들을 그대로 보여주고 싶으면

white-space 속성 옵션값을 pre 로 설정한다.

pre 옵션 값은 마치 HTML 의 <pre> 태그를 사용하는 것처럼 연속된 띄어쓰기와 들여쓰기, 줄바꿈이

그대로 유지된다.

 

 

pre-wrap

pre-wrap 옵션 값은 pre 옵션 값과 동일하게 연속된 띄어쓰기, 들여쓰기, 줄바꿈을 그대로 보여주지만

차이점은 텍스트가 부모 가로폭을 넘었을 때는 자동 줄바꿈이 일어난다.

 

 

pre-line

pre-line 옵션 값에 포함되어 있는 line 처럼 줄바꿈 문자만 있는 그대로 처리해주고

연속된 띄어쓰기, 들여쓰기 모두 한번으로 처리한다.

활용 사례가 많지 않아 예시는 하지 않겠습니다.