최근 작업할때 있었던 일인데 등록페이지에서 textarea에 입력한 문자를 다시 상세페이지에서 response값으로 받아 페이지에 보여주는 작업간에 황당한 문제를 발견했다.
나는 textarea에 입력할때 분명 개행해서 입력했는데 상세페이지에서 다시 확인할땐 개행없이 한줄로 보여졌던 것이였다..
이렇게 입력했는데?
⬇️⬇️⬇️
한줄로 보여짐..🤔
response값을 확인해보니 개행문이 포함되어 정상적으로 응답받아와지는 것은 확인하였다.
"😀😃😄 푸시 메시지 입력1 😀😃😄\n😀😃😄 푸시 메시지 입력2 😀😃😄\n😀😃😄 푸시 메시지 입력3 😀😃😄"문제가 뭔지 열심히 찾아보다 해답을 알아내었다. 답은 CSS의 white-space를 사용하는 것!
white-space
https://developer.mozilla.org/ko/docs/Web/CSS/white-space
/* Keyword values */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;
/* Global values */
white-space: inherit;
white-space: initial;
white-space: unset;white-space속성만 해도 이렇게나 많다..(자세한 내용은 공식문서 확인해보면 더 잘나옴)
결론은 MDN공식문서를 확인해보면 CSS의 기본 속성값이 white-space: normal로 되어있기 때문에 텍스트에 개행문이 포함되어 있다 하더라도 한줄로 보여지던 것이였다.
<span v-if="detail.noti_contents" style="white-space: pre">{{ detail.noti_contents }}</span>나는 개행과 띄어쓰기를 유지하고 자동 줄바꿈을 하지 않는 white-space: pre 속성을 사용하였다.
style지정 후 ⬇️⬇️⬇️
white-space: pre 사용 후 처음 입력한 개행 및 띄어쓰기를 유지한채로 메시지가 정상적으로 출력되어 보여지는것을 확인 할 수가 있었다.
마치며
작업하다 어쩌다 한번씩은 css때문에 골머리 썩히는 일도 생길때가 있는데 css무시하면 큰코다친다는걸 깨달았다.. 검색하면 몰론 금방나오지만 css문법도 눈에 많이 익혀둘수록 이런상황이 있을때 시간낭비 없이 바로 처리할 수 있으니까😅
