HTML 입력받은 글 공백과 줄바꿈, 가로길이(textarea, pre, pre-wrap)

JSP를 이용해 게시판에 댓글기능을 추가하면서 줄바꿈이 되지 않는 문제가 발생했다.
처음에 pre를 사용해서 해결했지만 가로길이가 적용되지 않는 문제가 발생했다.
서버단에서 \n을 <br>로 변경하는 것도 해보았지안 xss 문제를 해결하기에 어려움이 있어 방법을 찾던 도중 pre-wrap에 대해 알게되었다.
이 방법을 이용하면 <c:out value="${answer.answer}"/>를 이용해 xss를 해결할 수 있다.

총 4가지의 방법이 있고 4번째 방법이 가장 좋다.

입력 (textbox)

<div class="comment-message"><c:out value="${answer.answer}"/></div>

출력 1 - (div)

장점 : css적용, 자동 줄바꿈이 된다.
단점 : 공백이 하나만 적용되고 엔터키의 호환이 안된다

<div class="comment-message"><c:out value="${answer.answer}"/></div>

출력 2 - (pre)

장점 : 공백, 엔터키 적용이 된다.
단점 : css적용 안됨, 자동 줄바꿈이 안된다.

<div class="comment-message"><pre><c:out value="${answer.answer}"/></pre></div>

출력 3 - (pre-wrap)

장점 : 공백, 엔터키 적용이 자동 줄바꿈이된다.
단점 : css적용 안된다.

<div class="comment-message"><pre style="white-space:pre-wrap"><c:out value="${answer.answer}"/></pre></div>

출력 4 - div style pre-wrap

장점 : 공백, 엔터키 적용이 자동 줄바꿈 css적용이된다

<div class="comment-message" style="white-space:pre-wrap"><c:out value="${answer.answer}"/></div>

white-space에 사용할 수 있는 값은 다음과 같다.

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