[CSS] textarea 입력된 데이타를 출력에서 엔터가 줄바꿈으로 보이기 > 기술자료

• 목록
• 게시판 리스트 옵션
  • 검색

textarea 내용에 엔터로 표시된 것이 줄바꿈 처리되서 보이게 하는 방법입니다.
html 문서로 해석될때는 의미없지만,  textarea 내에서 보일때 줄바꿈 된 형태로 보이도록 합니다.

입력창에서의 모습
<textarea style="white-space: pre-line;">내용1
내용2
내용3</textarea>

브라우저에서 해석된 모습
내용1
내용2
내용3


1. <textarea> 사용하기


2. white-space 스타일을 사용하기
스타일 시트(CSS)를 사용해서 개행과 공백등이 원래대로 보이도록 하는 방법
<div style="white-space:pre;">가나다
라마바</div>

- normal : HTML의 기본 값입니다. 여러개의 공백은 하나로 표시되고, \n은 무시되며 긴 행은 필요시에 Wrap 됩니다.
- nowrap : normal과 같은데 긴행이 wrap 되지 않습니다. 글을 포함한 컨테이너를 넘어서 표시됩니다.
- pre : 여러개의 공백과 개행문자가 모두 표현됩니다. <pre> 태그와 같이 동작합니다. 긴행은 개행문자에서만 개항이 되고, wrap  되지 않습니다.
- pre-line : 여러개의 공백은 하나로 표시되고, 긴 행은 필요시 wrap 됩니다. 개행문자를 만나도 개행됩니다.
- pre-wrap : 여러개의 공백과 개행문자가 모두 보존됩니다. 개행문자외 에서도 필요시 wrap  됩니다.


3. <pre> 태그를 사용하기
<pre>가나다
라마바</pre>



참고자료
https://www.phychode.com/sprt/blog/sprtBlogPost.pem?blogSeq=1116
https://offbyone.tistory.com/326