프로젝트를 진행하면서 맡게 된 Pick Detail Page.
해당 페이지에는 stay(숙소 개념)의 대한 설명을 text로 표현한 부분이 있는데, 이 text 데이터를 backend로 받고 front에서 화면에 렌더해보니 문장들이 다 이어져서 화면에 렌더된다.
backend에서 확인한 바 문장들이 이쁘게 다듬어져있다.
backend에서는 문장들이 다듬어져 있는데 왜 frontend에서 data 그대로를 받아서 화면에 렌더했는데 다듬어져 있지 않고 문장들이 다 따닥따닥 붙어있는걸까…
이 부분에 대해서는 스스로 해답을 찾지는 못했고 멘토님이신 예리님의 도움(힌트)을 받아서 css 속성으로 해결했다.
바로 그 속성이 white-wrap이란 녀석이다.
white-wrap 속성의 값으로는 여러 가지가 있는데
normal;
nowrap;
pre;
pre-wrap;
pre-line;
이 있다.
이 중에서 pre-line 이라는 값을 사용해서 ackend에서 보이는 문장들이 다듬어져 있는 상태 그대로를 화면에 렌더할 수
있게됬다.
normal은 연속된 공백을 하나로 병합해주고 줄 바꿈이 이뤄지고, nowrap은 normal이 해주는것 플러스에
줄 바꿈을 하지않는다.
pre-wrap은 연속된 공백을 보존하고 필요에 따라 줄 바꿈이 이뤄지고, pre-line은 연속된 공백이 병합되면서 필요에 따라 줄 바꿈이 이뤄진다.
