[CSS] white-space : pre-wrap //textarea의 내용을 그대로 보여주고 싶을 때

프로젝트를 진행하던 중에 사용자가 글을 작성하고 이를 표현해야 할 경우가 있었다. 

 

처음 모습

white-space에 pre속성을 부여하면 이렇게 표현이 된다.

overflow: scroll  적용

여기에 overflow:scroll 속성을 주어 넘을경우 스크롤로 처리한다.

 

하지만 좌우 스크롤은 원하지 않고 상하의 스크롤만 적용, div를 넘을경우 다음줄로 넘어갔으면 한다.

 

이때 사용할 속성이 바로 white-space : pre-wrap 속성이다

 

overflow:scroll와 white-space: pre-wrap 적용 모습