white-space 줄 바꿈과 공백을 처리하자

const 변수 = '개행이 \n되지 않는다'

문제

변수에 문자열을 담아 브라우저에 표현하고 싶었다.

당연히 문자열 사이에 개행문자('\n')를 넣었으니 줄바꿈이 되겠지 싶었으나, 그렇지 않았다.

 

const 변수 = `개행이
되지 않는다`

템플릿 문자열로 띄어쓰기를 해줘도 실패했다.

 

해결

답은 간단하였다. 

 

브라우저에 텍스트를 표현해주는 태그의 style 속성 white-space의 값이 normal로 되어 있었다. html 기본 값이 normal이라고 한다.

white-space: pre를 입력해주니 개행문자와 템플릿 문자열 모두 적용이 된다.

 

white-space 속성으로 위의 사례인 개행과 중복 띄어쓰기를 다룰 수 있다.