안녕하십니까 개발자를 꿈꾸는 개발자 준비생입니다.
오늘은 쇼핑몰 프로젝트를 하던 중, DB에 제품의 설명을 적어 출력을 했는데 줄바꿈처리가 안되어서 줄바꿈처리가 가능하게 해줄 방법을 찾던 중 css로 간편하고 빠르게 줄바꿈 처리를 할 수 있는 방법을 찾아내 공유해보려고 합니다.
우선 저는 mariadb를 사용하고 db툴은 heidisql를 사용하여 테이블에 위와 같은 데이터를 삽입해주었습니다.
하지만 위에 처럼 설명글은 띄어쓰기는 적용이 되는데 줄바꿈(개행문자)는 처리가 안되어 출력이 되는 겁니다.
하지만 간단하고 쉬운 style 코드 하나로 이렇게 깔끔하게 줄바꿈(개행문자)를 처리할 수 있게 되었는데요. 그럼 어떤 코드인지 알려드리겠습니다.
<div class="tab-pane fade show active pt-3" style="white-space: pre-line;" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">{{productDetail.product_description}} <br><br>[color] <br>{{productDetail.product_color}} <br><br>[Fabric] <br>{{productDetail.product_fabric}} <br><br>[Model] <br>{{productDetail.product_model}}</div>
이게 바로 줄바꿈(개행문자)를 처리할 수 있게 도와준 코드입니다. 전체적으로 어떤 곳에 들어가야지 적용이 되는지 적용이 되는 전체적인 코드를 보여주었는데요. 저기서 style코드를 넣어주시면 바로 줄바꿈(개행문자)처리를 할 수 있게됩니다.
style="white-space: pre-line;"
이 style 코드를 저처럼 넣어주시면 쉽고 간단하고 깔끔하게 줄바꿈(개행문자) 처리를 할 수 있습니다.
읽어주셔서 감사합니다.
댓글