textarea 줄바꿈 표시하는 방법

---

❓ 문제 상황

textarea 에서 줄바꿈 표시하기

 

프로젝트 진행중 게시글에 수정하기를 누르면 textarea 에서 줄바꿈이 나타나지 않는 현상이 일어났다.

 

 

이러한 문제가 생기는 것을 찾아본 결과 입력된 텍스트의 줄바꿈을 제대로 저장하고 출력해주지 않아서 그렇고 한다.

 

하지만 찾아보니 문제는 생각보다 간단했다.

 

 

 

💡 문제 해결

white-space

white-space는 요소안의 공백처리를 어떻게 할지 지정하는 속성이다. 

 

• normal : 기본값, 공백을 여러개 넣어도 공백 1개만 표시되고, 글이 길어지면 텍스트가 자동 줄바꿈 됨니다.
• nowrap : 공백을 여러개 넣어도 1개만 표시되고, 텍스트가 길어도 줄바꿈 되지 않고 같은 줄에 계속 표시 된다.
• pre : 공백을 코드에 있는 그대로 표시한다. <pre>태그처럼 행동하고, 코드에 줄바꿈이 없다면 줄바꿈이 되지 않는다.
• pre-wrap : 공백을 코드에 있는 그대로 표시함. 코드에 줄바꿈이 없어도 자동 줄바꿈이 된다.
• pre-line : 공백을 여러개 넣어도 1개만 표시된다. 코드에 줄바꿈이 없어도 자동 줄바꿈이 되며, 코드에 줄바꿈이 있을 때도 그대로 표시 된다.

 

현재 처한 상황에 맞게 white-space: pre 를 이용하여 공백을 코드에 모두 포함시켜서 들여쓰기가 모두 인식되도록 했다. 

 

<div className="whitespace-pre"></div>

 

나는 지금 tailwind를 사용하여 프로젝트를 진행중에 있어서 

 

다음과 같이 white-space: pre 를 이용하여 정상적으로 작동되는 모습을 볼 수 있었다.

 

 

 

 

 

 

🔗참고

https://aboooks.tistory.com/187

white-space 속성(pre, pre-wrap, pre-line 차이)